import { jsx, jsxs } from "react/jsx-runtime";
import { useState, useRef, useEffect, forwardRef, createElement, useMemo } from "react";
function r(e) {
  var t, f, n = "";
  if ("string" == typeof e || "number" == typeof e) n += e;
  else if ("object" == typeof e) if (Array.isArray(e)) {
    var o = e.length;
    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
  } else for (f in e) e[f] && (n && (n += " "), n += f);
  return n;
}
function clsx() {
  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
  return n;
}
const CLASS_PART_SEPARATOR = "-";
const createClassGroupUtils = (config) => {
  const classMap = createClassMap(config);
  const {
    conflictingClassGroups,
    conflictingClassGroupModifiers
  } = config;
  const getClassGroupId = (className) => {
    const classParts = className.split(CLASS_PART_SEPARATOR);
    if (classParts[0] === "" && classParts.length !== 1) {
      classParts.shift();
    }
    return getGroupRecursive(classParts, classMap) || getGroupIdForArbitraryProperty(className);
  };
  const getConflictingClassGroupIds = (classGroupId, hasPostfixModifier) => {
    const conflicts = conflictingClassGroups[classGroupId] || [];
    if (hasPostfixModifier && conflictingClassGroupModifiers[classGroupId]) {
      return [...conflicts, ...conflictingClassGroupModifiers[classGroupId]];
    }
    return conflicts;
  };
  return {
    getClassGroupId,
    getConflictingClassGroupIds
  };
};
const getGroupRecursive = (classParts, classPartObject) => {
  var _a;
  if (classParts.length === 0) {
    return classPartObject.classGroupId;
  }
  const currentClassPart = classParts[0];
  const nextClassPartObject = classPartObject.nextPart.get(currentClassPart);
  const classGroupFromNextClassPart = nextClassPartObject ? getGroupRecursive(classParts.slice(1), nextClassPartObject) : void 0;
  if (classGroupFromNextClassPart) {
    return classGroupFromNextClassPart;
  }
  if (classPartObject.validators.length === 0) {
    return void 0;
  }
  const classRest = classParts.join(CLASS_PART_SEPARATOR);
  return (_a = classPartObject.validators.find(({
    validator
  }) => validator(classRest))) == null ? void 0 : _a.classGroupId;
};
const arbitraryPropertyRegex = /^\[(.+)\]$/;
const getGroupIdForArbitraryProperty = (className) => {
  if (arbitraryPropertyRegex.test(className)) {
    const arbitraryPropertyClassName = arbitraryPropertyRegex.exec(className)[1];
    const property = arbitraryPropertyClassName == null ? void 0 : arbitraryPropertyClassName.substring(0, arbitraryPropertyClassName.indexOf(":"));
    if (property) {
      return "arbitrary.." + property;
    }
  }
};
const createClassMap = (config) => {
  const {
    theme,
    prefix
  } = config;
  const classMap = {
    nextPart: /* @__PURE__ */ new Map(),
    validators: []
  };
  const prefixedClassGroupEntries = getPrefixedClassGroupEntries(Object.entries(config.classGroups), prefix);
  prefixedClassGroupEntries.forEach(([classGroupId, classGroup]) => {
    processClassesRecursively(classGroup, classMap, classGroupId, theme);
  });
  return classMap;
};
const processClassesRecursively = (classGroup, classPartObject, classGroupId, theme) => {
  classGroup.forEach((classDefinition) => {
    if (typeof classDefinition === "string") {
      const classPartObjectToEdit = classDefinition === "" ? classPartObject : getPart(classPartObject, classDefinition);
      classPartObjectToEdit.classGroupId = classGroupId;
      return;
    }
    if (typeof classDefinition === "function") {
      if (isThemeGetter(classDefinition)) {
        processClassesRecursively(classDefinition(theme), classPartObject, classGroupId, theme);
        return;
      }
      classPartObject.validators.push({
        validator: classDefinition,
        classGroupId
      });
      return;
    }
    Object.entries(classDefinition).forEach(([key, classGroup2]) => {
      processClassesRecursively(classGroup2, getPart(classPartObject, key), classGroupId, theme);
    });
  });
};
const getPart = (classPartObject, path) => {
  let currentClassPartObject = classPartObject;
  path.split(CLASS_PART_SEPARATOR).forEach((pathPart) => {
    if (!currentClassPartObject.nextPart.has(pathPart)) {
      currentClassPartObject.nextPart.set(pathPart, {
        nextPart: /* @__PURE__ */ new Map(),
        validators: []
      });
    }
    currentClassPartObject = currentClassPartObject.nextPart.get(pathPart);
  });
  return currentClassPartObject;
};
const isThemeGetter = (func) => func.isThemeGetter;
const getPrefixedClassGroupEntries = (classGroupEntries, prefix) => {
  if (!prefix) {
    return classGroupEntries;
  }
  return classGroupEntries.map(([classGroupId, classGroup]) => {
    const prefixedClassGroup = classGroup.map((classDefinition) => {
      if (typeof classDefinition === "string") {
        return prefix + classDefinition;
      }
      if (typeof classDefinition === "object") {
        return Object.fromEntries(Object.entries(classDefinition).map(([key, value]) => [prefix + key, value]));
      }
      return classDefinition;
    });
    return [classGroupId, prefixedClassGroup];
  });
};
const createLruCache = (maxCacheSize) => {
  if (maxCacheSize < 1) {
    return {
      get: () => void 0,
      set: () => {
      }
    };
  }
  let cacheSize = 0;
  let cache = /* @__PURE__ */ new Map();
  let previousCache = /* @__PURE__ */ new Map();
  const update = (key, value) => {
    cache.set(key, value);
    cacheSize++;
    if (cacheSize > maxCacheSize) {
      cacheSize = 0;
      previousCache = cache;
      cache = /* @__PURE__ */ new Map();
    }
  };
  return {
    get(key) {
      let value = cache.get(key);
      if (value !== void 0) {
        return value;
      }
      if ((value = previousCache.get(key)) !== void 0) {
        update(key, value);
        return value;
      }
    },
    set(key, value) {
      if (cache.has(key)) {
        cache.set(key, value);
      } else {
        update(key, value);
      }
    }
  };
};
const IMPORTANT_MODIFIER = "!";
const createParseClassName = (config) => {
  const {
    separator,
    experimentalParseClassName
  } = config;
  const isSeparatorSingleCharacter = separator.length === 1;
  const firstSeparatorCharacter = separator[0];
  const separatorLength = separator.length;
  const parseClassName = (className) => {
    const modifiers = [];
    let bracketDepth = 0;
    let modifierStart = 0;
    let postfixModifierPosition;
    for (let index = 0; index < className.length; index++) {
      let currentCharacter = className[index];
      if (bracketDepth === 0) {
        if (currentCharacter === firstSeparatorCharacter && (isSeparatorSingleCharacter || className.slice(index, index + separatorLength) === separator)) {
          modifiers.push(className.slice(modifierStart, index));
          modifierStart = index + separatorLength;
          continue;
        }
        if (currentCharacter === "/") {
          postfixModifierPosition = index;
          continue;
        }
      }
      if (currentCharacter === "[") {
        bracketDepth++;
      } else if (currentCharacter === "]") {
        bracketDepth--;
      }
    }
    const baseClassNameWithImportantModifier = modifiers.length === 0 ? className : className.substring(modifierStart);
    const hasImportantModifier = baseClassNameWithImportantModifier.startsWith(IMPORTANT_MODIFIER);
    const baseClassName = hasImportantModifier ? baseClassNameWithImportantModifier.substring(1) : baseClassNameWithImportantModifier;
    const maybePostfixModifierPosition = postfixModifierPosition && postfixModifierPosition > modifierStart ? postfixModifierPosition - modifierStart : void 0;
    return {
      modifiers,
      hasImportantModifier,
      baseClassName,
      maybePostfixModifierPosition
    };
  };
  if (experimentalParseClassName) {
    return (className) => experimentalParseClassName({
      className,
      parseClassName
    });
  }
  return parseClassName;
};
const sortModifiers = (modifiers) => {
  if (modifiers.length <= 1) {
    return modifiers;
  }
  const sortedModifiers = [];
  let unsortedModifiers = [];
  modifiers.forEach((modifier) => {
    const isArbitraryVariant = modifier[0] === "[";
    if (isArbitraryVariant) {
      sortedModifiers.push(...unsortedModifiers.sort(), modifier);
      unsortedModifiers = [];
    } else {
      unsortedModifiers.push(modifier);
    }
  });
  sortedModifiers.push(...unsortedModifiers.sort());
  return sortedModifiers;
};
const createConfigUtils = (config) => ({
  cache: createLruCache(config.cacheSize),
  parseClassName: createParseClassName(config),
  ...createClassGroupUtils(config)
});
const SPLIT_CLASSES_REGEX = /\s+/;
const mergeClassList = (classList, configUtils) => {
  const {
    parseClassName,
    getClassGroupId,
    getConflictingClassGroupIds
  } = configUtils;
  const classGroupsInConflict = [];
  const classNames = classList.trim().split(SPLIT_CLASSES_REGEX);
  let result = "";
  for (let index = classNames.length - 1; index >= 0; index -= 1) {
    const originalClassName = classNames[index];
    const {
      modifiers,
      hasImportantModifier,
      baseClassName,
      maybePostfixModifierPosition
    } = parseClassName(originalClassName);
    let hasPostfixModifier = Boolean(maybePostfixModifierPosition);
    let classGroupId = getClassGroupId(hasPostfixModifier ? baseClassName.substring(0, maybePostfixModifierPosition) : baseClassName);
    if (!classGroupId) {
      if (!hasPostfixModifier) {
        result = originalClassName + (result.length > 0 ? " " + result : result);
        continue;
      }
      classGroupId = getClassGroupId(baseClassName);
      if (!classGroupId) {
        result = originalClassName + (result.length > 0 ? " " + result : result);
        continue;
      }
      hasPostfixModifier = false;
    }
    const variantModifier = sortModifiers(modifiers).join(":");
    const modifierId = hasImportantModifier ? variantModifier + IMPORTANT_MODIFIER : variantModifier;
    const classId = modifierId + classGroupId;
    if (classGroupsInConflict.includes(classId)) {
      continue;
    }
    classGroupsInConflict.push(classId);
    const conflictGroups = getConflictingClassGroupIds(classGroupId, hasPostfixModifier);
    for (let i = 0; i < conflictGroups.length; ++i) {
      const group = conflictGroups[i];
      classGroupsInConflict.push(modifierId + group);
    }
    result = originalClassName + (result.length > 0 ? " " + result : result);
  }
  return result;
};
function twJoin() {
  let index = 0;
  let argument;
  let resolvedValue;
  let string = "";
  while (index < arguments.length) {
    if (argument = arguments[index++]) {
      if (resolvedValue = toValue(argument)) {
        string && (string += " ");
        string += resolvedValue;
      }
    }
  }
  return string;
}
const toValue = (mix) => {
  if (typeof mix === "string") {
    return mix;
  }
  let resolvedValue;
  let string = "";
  for (let k = 0; k < mix.length; k++) {
    if (mix[k]) {
      if (resolvedValue = toValue(mix[k])) {
        string && (string += " ");
        string += resolvedValue;
      }
    }
  }
  return string;
};
function createTailwindMerge(createConfigFirst, ...createConfigRest) {
  let configUtils;
  let cacheGet;
  let cacheSet;
  let functionToCall = initTailwindMerge;
  function initTailwindMerge(classList) {
    const config = createConfigRest.reduce((previousConfig, createConfigCurrent) => createConfigCurrent(previousConfig), createConfigFirst());
    configUtils = createConfigUtils(config);
    cacheGet = configUtils.cache.get;
    cacheSet = configUtils.cache.set;
    functionToCall = tailwindMerge;
    return tailwindMerge(classList);
  }
  function tailwindMerge(classList) {
    const cachedResult = cacheGet(classList);
    if (cachedResult) {
      return cachedResult;
    }
    const result = mergeClassList(classList, configUtils);
    cacheSet(classList, result);
    return result;
  }
  return function callTailwindMerge() {
    return functionToCall(twJoin.apply(null, arguments));
  };
}
const fromTheme = (key) => {
  const themeGetter = (theme) => theme[key] || [];
  themeGetter.isThemeGetter = true;
  return themeGetter;
};
const arbitraryValueRegex = /^\[(?:([a-z-]+):)?(.+)\]$/i;
const fractionRegex = /^\d+\/\d+$/;
const stringLengths = /* @__PURE__ */ new Set(["px", "full", "screen"]);
const tshirtUnitRegex = /^(\d+(\.\d+)?)?(xs|sm|md|lg|xl)$/;
const lengthUnitRegex = /\d+(%|px|r?em|[sdl]?v([hwib]|min|max)|pt|pc|in|cm|mm|cap|ch|ex|r?lh|cq(w|h|i|b|min|max))|\b(calc|min|max|clamp)\(.+\)|^0$/;
const colorFunctionRegex = /^(rgba?|hsla?|hwb|(ok)?(lab|lch))\(.+\)$/;
const shadowRegex = /^(inset_)?-?((\d+)?\.?(\d+)[a-z]+|0)_-?((\d+)?\.?(\d+)[a-z]+|0)/;
const imageRegex = /^(url|image|image-set|cross-fade|element|(repeating-)?(linear|radial|conic)-gradient)\(.+\)$/;
const isLength = (value) => isNumber(value) || stringLengths.has(value) || fractionRegex.test(value);
const isArbitraryLength = (value) => getIsArbitraryValue(value, "length", isLengthOnly);
const isNumber = (value) => Boolean(value) && !Number.isNaN(Number(value));
const isArbitraryNumber = (value) => getIsArbitraryValue(value, "number", isNumber);
const isInteger = (value) => Boolean(value) && Number.isInteger(Number(value));
const isPercent = (value) => value.endsWith("%") && isNumber(value.slice(0, -1));
const isArbitraryValue = (value) => arbitraryValueRegex.test(value);
const isTshirtSize = (value) => tshirtUnitRegex.test(value);
const sizeLabels = /* @__PURE__ */ new Set(["length", "size", "percentage"]);
const isArbitrarySize = (value) => getIsArbitraryValue(value, sizeLabels, isNever);
const isArbitraryPosition = (value) => getIsArbitraryValue(value, "position", isNever);
const imageLabels = /* @__PURE__ */ new Set(["image", "url"]);
const isArbitraryImage = (value) => getIsArbitraryValue(value, imageLabels, isImage);
const isArbitraryShadow = (value) => getIsArbitraryValue(value, "", isShadow);
const isAny = () => true;
const getIsArbitraryValue = (value, label, testValue) => {
  const result = arbitraryValueRegex.exec(value);
  if (result) {
    if (result[1]) {
      return typeof label === "string" ? result[1] === label : label.has(result[1]);
    }
    return testValue(result[2]);
  }
  return false;
};
const isLengthOnly = (value) => (
  // `colorFunctionRegex` check is necessary because color functions can have percentages in them which which would be incorrectly classified as lengths.
  // For example, `hsl(0 0% 0%)` would be classified as a length without this check.
  // I could also use lookbehind assertion in `lengthUnitRegex` but that isn't supported widely enough.
  lengthUnitRegex.test(value) && !colorFunctionRegex.test(value)
);
const isNever = () => false;
const isShadow = (value) => shadowRegex.test(value);
const isImage = (value) => imageRegex.test(value);
const getDefaultConfig = () => {
  const colors = fromTheme("colors");
  const spacing = fromTheme("spacing");
  const blur = fromTheme("blur");
  const brightness = fromTheme("brightness");
  const borderColor = fromTheme("borderColor");
  const borderRadius = fromTheme("borderRadius");
  const borderSpacing = fromTheme("borderSpacing");
  const borderWidth = fromTheme("borderWidth");
  const contrast = fromTheme("contrast");
  const grayscale = fromTheme("grayscale");
  const hueRotate = fromTheme("hueRotate");
  const invert = fromTheme("invert");
  const gap = fromTheme("gap");
  const gradientColorStops = fromTheme("gradientColorStops");
  const gradientColorStopPositions = fromTheme("gradientColorStopPositions");
  const inset = fromTheme("inset");
  const margin = fromTheme("margin");
  const opacity = fromTheme("opacity");
  const padding = fromTheme("padding");
  const saturate = fromTheme("saturate");
  const scale = fromTheme("scale");
  const sepia = fromTheme("sepia");
  const skew = fromTheme("skew");
  const space = fromTheme("space");
  const translate = fromTheme("translate");
  const getOverscroll = () => ["auto", "contain", "none"];
  const getOverflow = () => ["auto", "hidden", "clip", "visible", "scroll"];
  const getSpacingWithAutoAndArbitrary = () => ["auto", isArbitraryValue, spacing];
  const getSpacingWithArbitrary = () => [isArbitraryValue, spacing];
  const getLengthWithEmptyAndArbitrary = () => ["", isLength, isArbitraryLength];
  const getNumberWithAutoAndArbitrary = () => ["auto", isNumber, isArbitraryValue];
  const getPositions = () => ["bottom", "center", "left", "left-bottom", "left-top", "right", "right-bottom", "right-top", "top"];
  const getLineStyles = () => ["solid", "dashed", "dotted", "double", "none"];
  const getBlendModes = () => ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "hue", "saturation", "color", "luminosity"];
  const getAlign = () => ["start", "end", "center", "between", "around", "evenly", "stretch"];
  const getZeroAndEmpty = () => ["", "0", isArbitraryValue];
  const getBreaks = () => ["auto", "avoid", "all", "avoid-page", "page", "left", "right", "column"];
  const getNumberAndArbitrary = () => [isNumber, isArbitraryValue];
  return {
    cacheSize: 500,
    separator: ":",
    theme: {
      colors: [isAny],
      spacing: [isLength, isArbitraryLength],
      blur: ["none", "", isTshirtSize, isArbitraryValue],
      brightness: getNumberAndArbitrary(),
      borderColor: [colors],
      borderRadius: ["none", "", "full", isTshirtSize, isArbitraryValue],
      borderSpacing: getSpacingWithArbitrary(),
      borderWidth: getLengthWithEmptyAndArbitrary(),
      contrast: getNumberAndArbitrary(),
      grayscale: getZeroAndEmpty(),
      hueRotate: getNumberAndArbitrary(),
      invert: getZeroAndEmpty(),
      gap: getSpacingWithArbitrary(),
      gradientColorStops: [colors],
      gradientColorStopPositions: [isPercent, isArbitraryLength],
      inset: getSpacingWithAutoAndArbitrary(),
      margin: getSpacingWithAutoAndArbitrary(),
      opacity: getNumberAndArbitrary(),
      padding: getSpacingWithArbitrary(),
      saturate: getNumberAndArbitrary(),
      scale: getNumberAndArbitrary(),
      sepia: getZeroAndEmpty(),
      skew: getNumberAndArbitrary(),
      space: getSpacingWithArbitrary(),
      translate: getSpacingWithArbitrary()
    },
    classGroups: {
      // Layout
      /**
       * Aspect Ratio
       * @see https://tailwindcss.com/docs/aspect-ratio
       */
      aspect: [{
        aspect: ["auto", "square", "video", isArbitraryValue]
      }],
      /**
       * Container
       * @see https://tailwindcss.com/docs/container
       */
      container: ["container"],
      /**
       * Columns
       * @see https://tailwindcss.com/docs/columns
       */
      columns: [{
        columns: [isTshirtSize]
      }],
      /**
       * Break After
       * @see https://tailwindcss.com/docs/break-after
       */
      "break-after": [{
        "break-after": getBreaks()
      }],
      /**
       * Break Before
       * @see https://tailwindcss.com/docs/break-before
       */
      "break-before": [{
        "break-before": getBreaks()
      }],
      /**
       * Break Inside
       * @see https://tailwindcss.com/docs/break-inside
       */
      "break-inside": [{
        "break-inside": ["auto", "avoid", "avoid-page", "avoid-column"]
      }],
      /**
       * Box Decoration Break
       * @see https://tailwindcss.com/docs/box-decoration-break
       */
      "box-decoration": [{
        "box-decoration": ["slice", "clone"]
      }],
      /**
       * Box Sizing
       * @see https://tailwindcss.com/docs/box-sizing
       */
      box: [{
        box: ["border", "content"]
      }],
      /**
       * Display
       * @see https://tailwindcss.com/docs/display
       */
      display: ["block", "inline-block", "inline", "flex", "inline-flex", "table", "inline-table", "table-caption", "table-cell", "table-column", "table-column-group", "table-footer-group", "table-header-group", "table-row-group", "table-row", "flow-root", "grid", "inline-grid", "contents", "list-item", "hidden"],
      /**
       * Floats
       * @see https://tailwindcss.com/docs/float
       */
      float: [{
        float: ["right", "left", "none", "start", "end"]
      }],
      /**
       * Clear
       * @see https://tailwindcss.com/docs/clear
       */
      clear: [{
        clear: ["left", "right", "both", "none", "start", "end"]
      }],
      /**
       * Isolation
       * @see https://tailwindcss.com/docs/isolation
       */
      isolation: ["isolate", "isolation-auto"],
      /**
       * Object Fit
       * @see https://tailwindcss.com/docs/object-fit
       */
      "object-fit": [{
        object: ["contain", "cover", "fill", "none", "scale-down"]
      }],
      /**
       * Object Position
       * @see https://tailwindcss.com/docs/object-position
       */
      "object-position": [{
        object: [...getPositions(), isArbitraryValue]
      }],
      /**
       * Overflow
       * @see https://tailwindcss.com/docs/overflow
       */
      overflow: [{
        overflow: getOverflow()
      }],
      /**
       * Overflow X
       * @see https://tailwindcss.com/docs/overflow
       */
      "overflow-x": [{
        "overflow-x": getOverflow()
      }],
      /**
       * Overflow Y
       * @see https://tailwindcss.com/docs/overflow
       */
      "overflow-y": [{
        "overflow-y": getOverflow()
      }],
      /**
       * Overscroll Behavior
       * @see https://tailwindcss.com/docs/overscroll-behavior
       */
      overscroll: [{
        overscroll: getOverscroll()
      }],
      /**
       * Overscroll Behavior X
       * @see https://tailwindcss.com/docs/overscroll-behavior
       */
      "overscroll-x": [{
        "overscroll-x": getOverscroll()
      }],
      /**
       * Overscroll Behavior Y
       * @see https://tailwindcss.com/docs/overscroll-behavior
       */
      "overscroll-y": [{
        "overscroll-y": getOverscroll()
      }],
      /**
       * Position
       * @see https://tailwindcss.com/docs/position
       */
      position: ["static", "fixed", "absolute", "relative", "sticky"],
      /**
       * Top / Right / Bottom / Left
       * @see https://tailwindcss.com/docs/top-right-bottom-left
       */
      inset: [{
        inset: [inset]
      }],
      /**
       * Right / Left
       * @see https://tailwindcss.com/docs/top-right-bottom-left
       */
      "inset-x": [{
        "inset-x": [inset]
      }],
      /**
       * Top / Bottom
       * @see https://tailwindcss.com/docs/top-right-bottom-left
       */
      "inset-y": [{
        "inset-y": [inset]
      }],
      /**
       * Start
       * @see https://tailwindcss.com/docs/top-right-bottom-left
       */
      start: [{
        start: [inset]
      }],
      /**
       * End
       * @see https://tailwindcss.com/docs/top-right-bottom-left
       */
      end: [{
        end: [inset]
      }],
      /**
       * Top
       * @see https://tailwindcss.com/docs/top-right-bottom-left
       */
      top: [{
        top: [inset]
      }],
      /**
       * Right
       * @see https://tailwindcss.com/docs/top-right-bottom-left
       */
      right: [{
        right: [inset]
      }],
      /**
       * Bottom
       * @see https://tailwindcss.com/docs/top-right-bottom-left
       */
      bottom: [{
        bottom: [inset]
      }],
      /**
       * Left
       * @see https://tailwindcss.com/docs/top-right-bottom-left
       */
      left: [{
        left: [inset]
      }],
      /**
       * Visibility
       * @see https://tailwindcss.com/docs/visibility
       */
      visibility: ["visible", "invisible", "collapse"],
      /**
       * Z-Index
       * @see https://tailwindcss.com/docs/z-index
       */
      z: [{
        z: ["auto", isInteger, isArbitraryValue]
      }],
      // Flexbox and Grid
      /**
       * Flex Basis
       * @see https://tailwindcss.com/docs/flex-basis
       */
      basis: [{
        basis: getSpacingWithAutoAndArbitrary()
      }],
      /**
       * Flex Direction
       * @see https://tailwindcss.com/docs/flex-direction
       */
      "flex-direction": [{
        flex: ["row", "row-reverse", "col", "col-reverse"]
      }],
      /**
       * Flex Wrap
       * @see https://tailwindcss.com/docs/flex-wrap
       */
      "flex-wrap": [{
        flex: ["wrap", "wrap-reverse", "nowrap"]
      }],
      /**
       * Flex
       * @see https://tailwindcss.com/docs/flex
       */
      flex: [{
        flex: ["1", "auto", "initial", "none", isArbitraryValue]
      }],
      /**
       * Flex Grow
       * @see https://tailwindcss.com/docs/flex-grow
       */
      grow: [{
        grow: getZeroAndEmpty()
      }],
      /**
       * Flex Shrink
       * @see https://tailwindcss.com/docs/flex-shrink
       */
      shrink: [{
        shrink: getZeroAndEmpty()
      }],
      /**
       * Order
       * @see https://tailwindcss.com/docs/order
       */
      order: [{
        order: ["first", "last", "none", isInteger, isArbitraryValue]
      }],
      /**
       * Grid Template Columns
       * @see https://tailwindcss.com/docs/grid-template-columns
       */
      "grid-cols": [{
        "grid-cols": [isAny]
      }],
      /**
       * Grid Column Start / End
       * @see https://tailwindcss.com/docs/grid-column
       */
      "col-start-end": [{
        col: ["auto", {
          span: ["full", isInteger, isArbitraryValue]
        }, isArbitraryValue]
      }],
      /**
       * Grid Column Start
       * @see https://tailwindcss.com/docs/grid-column
       */
      "col-start": [{
        "col-start": getNumberWithAutoAndArbitrary()
      }],
      /**
       * Grid Column End
       * @see https://tailwindcss.com/docs/grid-column
       */
      "col-end": [{
        "col-end": getNumberWithAutoAndArbitrary()
      }],
      /**
       * Grid Template Rows
       * @see https://tailwindcss.com/docs/grid-template-rows
       */
      "grid-rows": [{
        "grid-rows": [isAny]
      }],
      /**
       * Grid Row Start / End
       * @see https://tailwindcss.com/docs/grid-row
       */
      "row-start-end": [{
        row: ["auto", {
          span: [isInteger, isArbitraryValue]
        }, isArbitraryValue]
      }],
      /**
       * Grid Row Start
       * @see https://tailwindcss.com/docs/grid-row
       */
      "row-start": [{
        "row-start": getNumberWithAutoAndArbitrary()
      }],
      /**
       * Grid Row End
       * @see https://tailwindcss.com/docs/grid-row
       */
      "row-end": [{
        "row-end": getNumberWithAutoAndArbitrary()
      }],
      /**
       * Grid Auto Flow
       * @see https://tailwindcss.com/docs/grid-auto-flow
       */
      "grid-flow": [{
        "grid-flow": ["row", "col", "dense", "row-dense", "col-dense"]
      }],
      /**
       * Grid Auto Columns
       * @see https://tailwindcss.com/docs/grid-auto-columns
       */
      "auto-cols": [{
        "auto-cols": ["auto", "min", "max", "fr", isArbitraryValue]
      }],
      /**
       * Grid Auto Rows
       * @see https://tailwindcss.com/docs/grid-auto-rows
       */
      "auto-rows": [{
        "auto-rows": ["auto", "min", "max", "fr", isArbitraryValue]
      }],
      /**
       * Gap
       * @see https://tailwindcss.com/docs/gap
       */
      gap: [{
        gap: [gap]
      }],
      /**
       * Gap X
       * @see https://tailwindcss.com/docs/gap
       */
      "gap-x": [{
        "gap-x": [gap]
      }],
      /**
       * Gap Y
       * @see https://tailwindcss.com/docs/gap
       */
      "gap-y": [{
        "gap-y": [gap]
      }],
      /**
       * Justify Content
       * @see https://tailwindcss.com/docs/justify-content
       */
      "justify-content": [{
        justify: ["normal", ...getAlign()]
      }],
      /**
       * Justify Items
       * @see https://tailwindcss.com/docs/justify-items
       */
      "justify-items": [{
        "justify-items": ["start", "end", "center", "stretch"]
      }],
      /**
       * Justify Self
       * @see https://tailwindcss.com/docs/justify-self
       */
      "justify-self": [{
        "justify-self": ["auto", "start", "end", "center", "stretch"]
      }],
      /**
       * Align Content
       * @see https://tailwindcss.com/docs/align-content
       */
      "align-content": [{
        content: ["normal", ...getAlign(), "baseline"]
      }],
      /**
       * Align Items
       * @see https://tailwindcss.com/docs/align-items
       */
      "align-items": [{
        items: ["start", "end", "center", "baseline", "stretch"]
      }],
      /**
       * Align Self
       * @see https://tailwindcss.com/docs/align-self
       */
      "align-self": [{
        self: ["auto", "start", "end", "center", "stretch", "baseline"]
      }],
      /**
       * Place Content
       * @see https://tailwindcss.com/docs/place-content
       */
      "place-content": [{
        "place-content": [...getAlign(), "baseline"]
      }],
      /**
       * Place Items
       * @see https://tailwindcss.com/docs/place-items
       */
      "place-items": [{
        "place-items": ["start", "end", "center", "baseline", "stretch"]
      }],
      /**
       * Place Self
       * @see https://tailwindcss.com/docs/place-self
       */
      "place-self": [{
        "place-self": ["auto", "start", "end", "center", "stretch"]
      }],
      // Spacing
      /**
       * Padding
       * @see https://tailwindcss.com/docs/padding
       */
      p: [{
        p: [padding]
      }],
      /**
       * Padding X
       * @see https://tailwindcss.com/docs/padding
       */
      px: [{
        px: [padding]
      }],
      /**
       * Padding Y
       * @see https://tailwindcss.com/docs/padding
       */
      py: [{
        py: [padding]
      }],
      /**
       * Padding Start
       * @see https://tailwindcss.com/docs/padding
       */
      ps: [{
        ps: [padding]
      }],
      /**
       * Padding End
       * @see https://tailwindcss.com/docs/padding
       */
      pe: [{
        pe: [padding]
      }],
      /**
       * Padding Top
       * @see https://tailwindcss.com/docs/padding
       */
      pt: [{
        pt: [padding]
      }],
      /**
       * Padding Right
       * @see https://tailwindcss.com/docs/padding
       */
      pr: [{
        pr: [padding]
      }],
      /**
       * Padding Bottom
       * @see https://tailwindcss.com/docs/padding
       */
      pb: [{
        pb: [padding]
      }],
      /**
       * Padding Left
       * @see https://tailwindcss.com/docs/padding
       */
      pl: [{
        pl: [padding]
      }],
      /**
       * Margin
       * @see https://tailwindcss.com/docs/margin
       */
      m: [{
        m: [margin]
      }],
      /**
       * Margin X
       * @see https://tailwindcss.com/docs/margin
       */
      mx: [{
        mx: [margin]
      }],
      /**
       * Margin Y
       * @see https://tailwindcss.com/docs/margin
       */
      my: [{
        my: [margin]
      }],
      /**
       * Margin Start
       * @see https://tailwindcss.com/docs/margin
       */
      ms: [{
        ms: [margin]
      }],
      /**
       * Margin End
       * @see https://tailwindcss.com/docs/margin
       */
      me: [{
        me: [margin]
      }],
      /**
       * Margin Top
       * @see https://tailwindcss.com/docs/margin
       */
      mt: [{
        mt: [margin]
      }],
      /**
       * Margin Right
       * @see https://tailwindcss.com/docs/margin
       */
      mr: [{
        mr: [margin]
      }],
      /**
       * Margin Bottom
       * @see https://tailwindcss.com/docs/margin
       */
      mb: [{
        mb: [margin]
      }],
      /**
       * Margin Left
       * @see https://tailwindcss.com/docs/margin
       */
      ml: [{
        ml: [margin]
      }],
      /**
       * Space Between X
       * @see https://tailwindcss.com/docs/space
       */
      "space-x": [{
        "space-x": [space]
      }],
      /**
       * Space Between X Reverse
       * @see https://tailwindcss.com/docs/space
       */
      "space-x-reverse": ["space-x-reverse"],
      /**
       * Space Between Y
       * @see https://tailwindcss.com/docs/space
       */
      "space-y": [{
        "space-y": [space]
      }],
      /**
       * Space Between Y Reverse
       * @see https://tailwindcss.com/docs/space
       */
      "space-y-reverse": ["space-y-reverse"],
      // Sizing
      /**
       * Width
       * @see https://tailwindcss.com/docs/width
       */
      w: [{
        w: ["auto", "min", "max", "fit", "svw", "lvw", "dvw", isArbitraryValue, spacing]
      }],
      /**
       * Min-Width
       * @see https://tailwindcss.com/docs/min-width
       */
      "min-w": [{
        "min-w": [isArbitraryValue, spacing, "min", "max", "fit"]
      }],
      /**
       * Max-Width
       * @see https://tailwindcss.com/docs/max-width
       */
      "max-w": [{
        "max-w": [isArbitraryValue, spacing, "none", "full", "min", "max", "fit", "prose", {
          screen: [isTshirtSize]
        }, isTshirtSize]
      }],
      /**
       * Height
       * @see https://tailwindcss.com/docs/height
       */
      h: [{
        h: [isArbitraryValue, spacing, "auto", "min", "max", "fit", "svh", "lvh", "dvh"]
      }],
      /**
       * Min-Height
       * @see https://tailwindcss.com/docs/min-height
       */
      "min-h": [{
        "min-h": [isArbitraryValue, spacing, "min", "max", "fit", "svh", "lvh", "dvh"]
      }],
      /**
       * Max-Height
       * @see https://tailwindcss.com/docs/max-height
       */
      "max-h": [{
        "max-h": [isArbitraryValue, spacing, "min", "max", "fit", "svh", "lvh", "dvh"]
      }],
      /**
       * Size
       * @see https://tailwindcss.com/docs/size
       */
      size: [{
        size: [isArbitraryValue, spacing, "auto", "min", "max", "fit"]
      }],
      // Typography
      /**
       * Font Size
       * @see https://tailwindcss.com/docs/font-size
       */
      "font-size": [{
        text: ["base", isTshirtSize, isArbitraryLength]
      }],
      /**
       * Font Smoothing
       * @see https://tailwindcss.com/docs/font-smoothing
       */
      "font-smoothing": ["antialiased", "subpixel-antialiased"],
      /**
       * Font Style
       * @see https://tailwindcss.com/docs/font-style
       */
      "font-style": ["italic", "not-italic"],
      /**
       * Font Weight
       * @see https://tailwindcss.com/docs/font-weight
       */
      "font-weight": [{
        font: ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black", isArbitraryNumber]
      }],
      /**
       * Font Family
       * @see https://tailwindcss.com/docs/font-family
       */
      "font-family": [{
        font: [isAny]
      }],
      /**
       * Font Variant Numeric
       * @see https://tailwindcss.com/docs/font-variant-numeric
       */
      "fvn-normal": ["normal-nums"],
      /**
       * Font Variant Numeric
       * @see https://tailwindcss.com/docs/font-variant-numeric
       */
      "fvn-ordinal": ["ordinal"],
      /**
       * Font Variant Numeric
       * @see https://tailwindcss.com/docs/font-variant-numeric
       */
      "fvn-slashed-zero": ["slashed-zero"],
      /**
       * Font Variant Numeric
       * @see https://tailwindcss.com/docs/font-variant-numeric
       */
      "fvn-figure": ["lining-nums", "oldstyle-nums"],
      /**
       * Font Variant Numeric
       * @see https://tailwindcss.com/docs/font-variant-numeric
       */
      "fvn-spacing": ["proportional-nums", "tabular-nums"],
      /**
       * Font Variant Numeric
       * @see https://tailwindcss.com/docs/font-variant-numeric
       */
      "fvn-fraction": ["diagonal-fractions", "stacked-fractions"],
      /**
       * Letter Spacing
       * @see https://tailwindcss.com/docs/letter-spacing
       */
      tracking: [{
        tracking: ["tighter", "tight", "normal", "wide", "wider", "widest", isArbitraryValue]
      }],
      /**
       * Line Clamp
       * @see https://tailwindcss.com/docs/line-clamp
       */
      "line-clamp": [{
        "line-clamp": ["none", isNumber, isArbitraryNumber]
      }],
      /**
       * Line Height
       * @see https://tailwindcss.com/docs/line-height
       */
      leading: [{
        leading: ["none", "tight", "snug", "normal", "relaxed", "loose", isLength, isArbitraryValue]
      }],
      /**
       * List Style Image
       * @see https://tailwindcss.com/docs/list-style-image
       */
      "list-image": [{
        "list-image": ["none", isArbitraryValue]
      }],
      /**
       * List Style Type
       * @see https://tailwindcss.com/docs/list-style-type
       */
      "list-style-type": [{
        list: ["none", "disc", "decimal", isArbitraryValue]
      }],
      /**
       * List Style Position
       * @see https://tailwindcss.com/docs/list-style-position
       */
      "list-style-position": [{
        list: ["inside", "outside"]
      }],
      /**
       * Placeholder Color
       * @deprecated since Tailwind CSS v3.0.0
       * @see https://tailwindcss.com/docs/placeholder-color
       */
      "placeholder-color": [{
        placeholder: [colors]
      }],
      /**
       * Placeholder Opacity
       * @see https://tailwindcss.com/docs/placeholder-opacity
       */
      "placeholder-opacity": [{
        "placeholder-opacity": [opacity]
      }],
      /**
       * Text Alignment
       * @see https://tailwindcss.com/docs/text-align
       */
      "text-alignment": [{
        text: ["left", "center", "right", "justify", "start", "end"]
      }],
      /**
       * Text Color
       * @see https://tailwindcss.com/docs/text-color
       */
      "text-color": [{
        text: [colors]
      }],
      /**
       * Text Opacity
       * @see https://tailwindcss.com/docs/text-opacity
       */
      "text-opacity": [{
        "text-opacity": [opacity]
      }],
      /**
       * Text Decoration
       * @see https://tailwindcss.com/docs/text-decoration
       */
      "text-decoration": ["underline", "overline", "line-through", "no-underline"],
      /**
       * Text Decoration Style
       * @see https://tailwindcss.com/docs/text-decoration-style
       */
      "text-decoration-style": [{
        decoration: [...getLineStyles(), "wavy"]
      }],
      /**
       * Text Decoration Thickness
       * @see https://tailwindcss.com/docs/text-decoration-thickness
       */
      "text-decoration-thickness": [{
        decoration: ["auto", "from-font", isLength, isArbitraryLength]
      }],
      /**
       * Text Underline Offset
       * @see https://tailwindcss.com/docs/text-underline-offset
       */
      "underline-offset": [{
        "underline-offset": ["auto", isLength, isArbitraryValue]
      }],
      /**
       * Text Decoration Color
       * @see https://tailwindcss.com/docs/text-decoration-color
       */
      "text-decoration-color": [{
        decoration: [colors]
      }],
      /**
       * Text Transform
       * @see https://tailwindcss.com/docs/text-transform
       */
      "text-transform": ["uppercase", "lowercase", "capitalize", "normal-case"],
      /**
       * Text Overflow
       * @see https://tailwindcss.com/docs/text-overflow
       */
      "text-overflow": ["truncate", "text-ellipsis", "text-clip"],
      /**
       * Text Wrap
       * @see https://tailwindcss.com/docs/text-wrap
       */
      "text-wrap": [{
        text: ["wrap", "nowrap", "balance", "pretty"]
      }],
      /**
       * Text Indent
       * @see https://tailwindcss.com/docs/text-indent
       */
      indent: [{
        indent: getSpacingWithArbitrary()
      }],
      /**
       * Vertical Alignment
       * @see https://tailwindcss.com/docs/vertical-align
       */
      "vertical-align": [{
        align: ["baseline", "top", "middle", "bottom", "text-top", "text-bottom", "sub", "super", isArbitraryValue]
      }],
      /**
       * Whitespace
       * @see https://tailwindcss.com/docs/whitespace
       */
      whitespace: [{
        whitespace: ["normal", "nowrap", "pre", "pre-line", "pre-wrap", "break-spaces"]
      }],
      /**
       * Word Break
       * @see https://tailwindcss.com/docs/word-break
       */
      break: [{
        break: ["normal", "words", "all", "keep"]
      }],
      /**
       * Hyphens
       * @see https://tailwindcss.com/docs/hyphens
       */
      hyphens: [{
        hyphens: ["none", "manual", "auto"]
      }],
      /**
       * Content
       * @see https://tailwindcss.com/docs/content
       */
      content: [{
        content: ["none", isArbitraryValue]
      }],
      // Backgrounds
      /**
       * Background Attachment
       * @see https://tailwindcss.com/docs/background-attachment
       */
      "bg-attachment": [{
        bg: ["fixed", "local", "scroll"]
      }],
      /**
       * Background Clip
       * @see https://tailwindcss.com/docs/background-clip
       */
      "bg-clip": [{
        "bg-clip": ["border", "padding", "content", "text"]
      }],
      /**
       * Background Opacity
       * @deprecated since Tailwind CSS v3.0.0
       * @see https://tailwindcss.com/docs/background-opacity
       */
      "bg-opacity": [{
        "bg-opacity": [opacity]
      }],
      /**
       * Background Origin
       * @see https://tailwindcss.com/docs/background-origin
       */
      "bg-origin": [{
        "bg-origin": ["border", "padding", "content"]
      }],
      /**
       * Background Position
       * @see https://tailwindcss.com/docs/background-position
       */
      "bg-position": [{
        bg: [...getPositions(), isArbitraryPosition]
      }],
      /**
       * Background Repeat
       * @see https://tailwindcss.com/docs/background-repeat
       */
      "bg-repeat": [{
        bg: ["no-repeat", {
          repeat: ["", "x", "y", "round", "space"]
        }]
      }],
      /**
       * Background Size
       * @see https://tailwindcss.com/docs/background-size
       */
      "bg-size": [{
        bg: ["auto", "cover", "contain", isArbitrarySize]
      }],
      /**
       * Background Image
       * @see https://tailwindcss.com/docs/background-image
       */
      "bg-image": [{
        bg: ["none", {
          "gradient-to": ["t", "tr", "r", "br", "b", "bl", "l", "tl"]
        }, isArbitraryImage]
      }],
      /**
       * Background Color
       * @see https://tailwindcss.com/docs/background-color
       */
      "bg-color": [{
        bg: [colors]
      }],
      /**
       * Gradient Color Stops From Position
       * @see https://tailwindcss.com/docs/gradient-color-stops
       */
      "gradient-from-pos": [{
        from: [gradientColorStopPositions]
      }],
      /**
       * Gradient Color Stops Via Position
       * @see https://tailwindcss.com/docs/gradient-color-stops
       */
      "gradient-via-pos": [{
        via: [gradientColorStopPositions]
      }],
      /**
       * Gradient Color Stops To Position
       * @see https://tailwindcss.com/docs/gradient-color-stops
       */
      "gradient-to-pos": [{
        to: [gradientColorStopPositions]
      }],
      /**
       * Gradient Color Stops From
       * @see https://tailwindcss.com/docs/gradient-color-stops
       */
      "gradient-from": [{
        from: [gradientColorStops]
      }],
      /**
       * Gradient Color Stops Via
       * @see https://tailwindcss.com/docs/gradient-color-stops
       */
      "gradient-via": [{
        via: [gradientColorStops]
      }],
      /**
       * Gradient Color Stops To
       * @see https://tailwindcss.com/docs/gradient-color-stops
       */
      "gradient-to": [{
        to: [gradientColorStops]
      }],
      // Borders
      /**
       * Border Radius
       * @see https://tailwindcss.com/docs/border-radius
       */
      rounded: [{
        rounded: [borderRadius]
      }],
      /**
       * Border Radius Start
       * @see https://tailwindcss.com/docs/border-radius
       */
      "rounded-s": [{
        "rounded-s": [borderRadius]
      }],
      /**
       * Border Radius End
       * @see https://tailwindcss.com/docs/border-radius
       */
      "rounded-e": [{
        "rounded-e": [borderRadius]
      }],
      /**
       * Border Radius Top
       * @see https://tailwindcss.com/docs/border-radius
       */
      "rounded-t": [{
        "rounded-t": [borderRadius]
      }],
      /**
       * Border Radius Right
       * @see https://tailwindcss.com/docs/border-radius
       */
      "rounded-r": [{
        "rounded-r": [borderRadius]
      }],
      /**
       * Border Radius Bottom
       * @see https://tailwindcss.com/docs/border-radius
       */
      "rounded-b": [{
        "rounded-b": [borderRadius]
      }],
      /**
       * Border Radius Left
       * @see https://tailwindcss.com/docs/border-radius
       */
      "rounded-l": [{
        "rounded-l": [borderRadius]
      }],
      /**
       * Border Radius Start Start
       * @see https://tailwindcss.com/docs/border-radius
       */
      "rounded-ss": [{
        "rounded-ss": [borderRadius]
      }],
      /**
       * Border Radius Start End
       * @see https://tailwindcss.com/docs/border-radius
       */
      "rounded-se": [{
        "rounded-se": [borderRadius]
      }],
      /**
       * Border Radius End End
       * @see https://tailwindcss.com/docs/border-radius
       */
      "rounded-ee": [{
        "rounded-ee": [borderRadius]
      }],
      /**
       * Border Radius End Start
       * @see https://tailwindcss.com/docs/border-radius
       */
      "rounded-es": [{
        "rounded-es": [borderRadius]
      }],
      /**
       * Border Radius Top Left
       * @see https://tailwindcss.com/docs/border-radius
       */
      "rounded-tl": [{
        "rounded-tl": [borderRadius]
      }],
      /**
       * Border Radius Top Right
       * @see https://tailwindcss.com/docs/border-radius
       */
      "rounded-tr": [{
        "rounded-tr": [borderRadius]
      }],
      /**
       * Border Radius Bottom Right
       * @see https://tailwindcss.com/docs/border-radius
       */
      "rounded-br": [{
        "rounded-br": [borderRadius]
      }],
      /**
       * Border Radius Bottom Left
       * @see https://tailwindcss.com/docs/border-radius
       */
      "rounded-bl": [{
        "rounded-bl": [borderRadius]
      }],
      /**
       * Border Width
       * @see https://tailwindcss.com/docs/border-width
       */
      "border-w": [{
        border: [borderWidth]
      }],
      /**
       * Border Width X
       * @see https://tailwindcss.com/docs/border-width
       */
      "border-w-x": [{
        "border-x": [borderWidth]
      }],
      /**
       * Border Width Y
       * @see https://tailwindcss.com/docs/border-width
       */
      "border-w-y": [{
        "border-y": [borderWidth]
      }],
      /**
       * Border Width Start
       * @see https://tailwindcss.com/docs/border-width
       */
      "border-w-s": [{
        "border-s": [borderWidth]
      }],
      /**
       * Border Width End
       * @see https://tailwindcss.com/docs/border-width
       */
      "border-w-e": [{
        "border-e": [borderWidth]
      }],
      /**
       * Border Width Top
       * @see https://tailwindcss.com/docs/border-width
       */
      "border-w-t": [{
        "border-t": [borderWidth]
      }],
      /**
       * Border Width Right
       * @see https://tailwindcss.com/docs/border-width
       */
      "border-w-r": [{
        "border-r": [borderWidth]
      }],
      /**
       * Border Width Bottom
       * @see https://tailwindcss.com/docs/border-width
       */
      "border-w-b": [{
        "border-b": [borderWidth]
      }],
      /**
       * Border Width Left
       * @see https://tailwindcss.com/docs/border-width
       */
      "border-w-l": [{
        "border-l": [borderWidth]
      }],
      /**
       * Border Opacity
       * @see https://tailwindcss.com/docs/border-opacity
       */
      "border-opacity": [{
        "border-opacity": [opacity]
      }],
      /**
       * Border Style
       * @see https://tailwindcss.com/docs/border-style
       */
      "border-style": [{
        border: [...getLineStyles(), "hidden"]
      }],
      /**
       * Divide Width X
       * @see https://tailwindcss.com/docs/divide-width
       */
      "divide-x": [{
        "divide-x": [borderWidth]
      }],
      /**
       * Divide Width X Reverse
       * @see https://tailwindcss.com/docs/divide-width
       */
      "divide-x-reverse": ["divide-x-reverse"],
      /**
       * Divide Width Y
       * @see https://tailwindcss.com/docs/divide-width
       */
      "divide-y": [{
        "divide-y": [borderWidth]
      }],
      /**
       * Divide Width Y Reverse
       * @see https://tailwindcss.com/docs/divide-width
       */
      "divide-y-reverse": ["divide-y-reverse"],
      /**
       * Divide Opacity
       * @see https://tailwindcss.com/docs/divide-opacity
       */
      "divide-opacity": [{
        "divide-opacity": [opacity]
      }],
      /**
       * Divide Style
       * @see https://tailwindcss.com/docs/divide-style
       */
      "divide-style": [{
        divide: getLineStyles()
      }],
      /**
       * Border Color
       * @see https://tailwindcss.com/docs/border-color
       */
      "border-color": [{
        border: [borderColor]
      }],
      /**
       * Border Color X
       * @see https://tailwindcss.com/docs/border-color
       */
      "border-color-x": [{
        "border-x": [borderColor]
      }],
      /**
       * Border Color Y
       * @see https://tailwindcss.com/docs/border-color
       */
      "border-color-y": [{
        "border-y": [borderColor]
      }],
      /**
       * Border Color S
       * @see https://tailwindcss.com/docs/border-color
       */
      "border-color-s": [{
        "border-s": [borderColor]
      }],
      /**
       * Border Color E
       * @see https://tailwindcss.com/docs/border-color
       */
      "border-color-e": [{
        "border-e": [borderColor]
      }],
      /**
       * Border Color Top
       * @see https://tailwindcss.com/docs/border-color
       */
      "border-color-t": [{
        "border-t": [borderColor]
      }],
      /**
       * Border Color Right
       * @see https://tailwindcss.com/docs/border-color
       */
      "border-color-r": [{
        "border-r": [borderColor]
      }],
      /**
       * Border Color Bottom
       * @see https://tailwindcss.com/docs/border-color
       */
      "border-color-b": [{
        "border-b": [borderColor]
      }],
      /**
       * Border Color Left
       * @see https://tailwindcss.com/docs/border-color
       */
      "border-color-l": [{
        "border-l": [borderColor]
      }],
      /**
       * Divide Color
       * @see https://tailwindcss.com/docs/divide-color
       */
      "divide-color": [{
        divide: [borderColor]
      }],
      /**
       * Outline Style
       * @see https://tailwindcss.com/docs/outline-style
       */
      "outline-style": [{
        outline: ["", ...getLineStyles()]
      }],
      /**
       * Outline Offset
       * @see https://tailwindcss.com/docs/outline-offset
       */
      "outline-offset": [{
        "outline-offset": [isLength, isArbitraryValue]
      }],
      /**
       * Outline Width
       * @see https://tailwindcss.com/docs/outline-width
       */
      "outline-w": [{
        outline: [isLength, isArbitraryLength]
      }],
      /**
       * Outline Color
       * @see https://tailwindcss.com/docs/outline-color
       */
      "outline-color": [{
        outline: [colors]
      }],
      /**
       * Ring Width
       * @see https://tailwindcss.com/docs/ring-width
       */
      "ring-w": [{
        ring: getLengthWithEmptyAndArbitrary()
      }],
      /**
       * Ring Width Inset
       * @see https://tailwindcss.com/docs/ring-width
       */
      "ring-w-inset": ["ring-inset"],
      /**
       * Ring Color
       * @see https://tailwindcss.com/docs/ring-color
       */
      "ring-color": [{
        ring: [colors]
      }],
      /**
       * Ring Opacity
       * @see https://tailwindcss.com/docs/ring-opacity
       */
      "ring-opacity": [{
        "ring-opacity": [opacity]
      }],
      /**
       * Ring Offset Width
       * @see https://tailwindcss.com/docs/ring-offset-width
       */
      "ring-offset-w": [{
        "ring-offset": [isLength, isArbitraryLength]
      }],
      /**
       * Ring Offset Color
       * @see https://tailwindcss.com/docs/ring-offset-color
       */
      "ring-offset-color": [{
        "ring-offset": [colors]
      }],
      // Effects
      /**
       * Box Shadow
       * @see https://tailwindcss.com/docs/box-shadow
       */
      shadow: [{
        shadow: ["", "inner", "none", isTshirtSize, isArbitraryShadow]
      }],
      /**
       * Box Shadow Color
       * @see https://tailwindcss.com/docs/box-shadow-color
       */
      "shadow-color": [{
        shadow: [isAny]
      }],
      /**
       * Opacity
       * @see https://tailwindcss.com/docs/opacity
       */
      opacity: [{
        opacity: [opacity]
      }],
      /**
       * Mix Blend Mode
       * @see https://tailwindcss.com/docs/mix-blend-mode
       */
      "mix-blend": [{
        "mix-blend": [...getBlendModes(), "plus-lighter", "plus-darker"]
      }],
      /**
       * Background Blend Mode
       * @see https://tailwindcss.com/docs/background-blend-mode
       */
      "bg-blend": [{
        "bg-blend": getBlendModes()
      }],
      // Filters
      /**
       * Filter
       * @deprecated since Tailwind CSS v3.0.0
       * @see https://tailwindcss.com/docs/filter
       */
      filter: [{
        filter: ["", "none"]
      }],
      /**
       * Blur
       * @see https://tailwindcss.com/docs/blur
       */
      blur: [{
        blur: [blur]
      }],
      /**
       * Brightness
       * @see https://tailwindcss.com/docs/brightness
       */
      brightness: [{
        brightness: [brightness]
      }],
      /**
       * Contrast
       * @see https://tailwindcss.com/docs/contrast
       */
      contrast: [{
        contrast: [contrast]
      }],
      /**
       * Drop Shadow
       * @see https://tailwindcss.com/docs/drop-shadow
       */
      "drop-shadow": [{
        "drop-shadow": ["", "none", isTshirtSize, isArbitraryValue]
      }],
      /**
       * Grayscale
       * @see https://tailwindcss.com/docs/grayscale
       */
      grayscale: [{
        grayscale: [grayscale]
      }],
      /**
       * Hue Rotate
       * @see https://tailwindcss.com/docs/hue-rotate
       */
      "hue-rotate": [{
        "hue-rotate": [hueRotate]
      }],
      /**
       * Invert
       * @see https://tailwindcss.com/docs/invert
       */
      invert: [{
        invert: [invert]
      }],
      /**
       * Saturate
       * @see https://tailwindcss.com/docs/saturate
       */
      saturate: [{
        saturate: [saturate]
      }],
      /**
       * Sepia
       * @see https://tailwindcss.com/docs/sepia
       */
      sepia: [{
        sepia: [sepia]
      }],
      /**
       * Backdrop Filter
       * @deprecated since Tailwind CSS v3.0.0
       * @see https://tailwindcss.com/docs/backdrop-filter
       */
      "backdrop-filter": [{
        "backdrop-filter": ["", "none"]
      }],
      /**
       * Backdrop Blur
       * @see https://tailwindcss.com/docs/backdrop-blur
       */
      "backdrop-blur": [{
        "backdrop-blur": [blur]
      }],
      /**
       * Backdrop Brightness
       * @see https://tailwindcss.com/docs/backdrop-brightness
       */
      "backdrop-brightness": [{
        "backdrop-brightness": [brightness]
      }],
      /**
       * Backdrop Contrast
       * @see https://tailwindcss.com/docs/backdrop-contrast
       */
      "backdrop-contrast": [{
        "backdrop-contrast": [contrast]
      }],
      /**
       * Backdrop Grayscale
       * @see https://tailwindcss.com/docs/backdrop-grayscale
       */
      "backdrop-grayscale": [{
        "backdrop-grayscale": [grayscale]
      }],
      /**
       * Backdrop Hue Rotate
       * @see https://tailwindcss.com/docs/backdrop-hue-rotate
       */
      "backdrop-hue-rotate": [{
        "backdrop-hue-rotate": [hueRotate]
      }],
      /**
       * Backdrop Invert
       * @see https://tailwindcss.com/docs/backdrop-invert
       */
      "backdrop-invert": [{
        "backdrop-invert": [invert]
      }],
      /**
       * Backdrop Opacity
       * @see https://tailwindcss.com/docs/backdrop-opacity
       */
      "backdrop-opacity": [{
        "backdrop-opacity": [opacity]
      }],
      /**
       * Backdrop Saturate
       * @see https://tailwindcss.com/docs/backdrop-saturate
       */
      "backdrop-saturate": [{
        "backdrop-saturate": [saturate]
      }],
      /**
       * Backdrop Sepia
       * @see https://tailwindcss.com/docs/backdrop-sepia
       */
      "backdrop-sepia": [{
        "backdrop-sepia": [sepia]
      }],
      // Tables
      /**
       * Border Collapse
       * @see https://tailwindcss.com/docs/border-collapse
       */
      "border-collapse": [{
        border: ["collapse", "separate"]
      }],
      /**
       * Border Spacing
       * @see https://tailwindcss.com/docs/border-spacing
       */
      "border-spacing": [{
        "border-spacing": [borderSpacing]
      }],
      /**
       * Border Spacing X
       * @see https://tailwindcss.com/docs/border-spacing
       */
      "border-spacing-x": [{
        "border-spacing-x": [borderSpacing]
      }],
      /**
       * Border Spacing Y
       * @see https://tailwindcss.com/docs/border-spacing
       */
      "border-spacing-y": [{
        "border-spacing-y": [borderSpacing]
      }],
      /**
       * Table Layout
       * @see https://tailwindcss.com/docs/table-layout
       */
      "table-layout": [{
        table: ["auto", "fixed"]
      }],
      /**
       * Caption Side
       * @see https://tailwindcss.com/docs/caption-side
       */
      caption: [{
        caption: ["top", "bottom"]
      }],
      // Transitions and Animation
      /**
       * Tranisition Property
       * @see https://tailwindcss.com/docs/transition-property
       */
      transition: [{
        transition: ["none", "all", "", "colors", "opacity", "shadow", "transform", isArbitraryValue]
      }],
      /**
       * Transition Duration
       * @see https://tailwindcss.com/docs/transition-duration
       */
      duration: [{
        duration: getNumberAndArbitrary()
      }],
      /**
       * Transition Timing Function
       * @see https://tailwindcss.com/docs/transition-timing-function
       */
      ease: [{
        ease: ["linear", "in", "out", "in-out", isArbitraryValue]
      }],
      /**
       * Transition Delay
       * @see https://tailwindcss.com/docs/transition-delay
       */
      delay: [{
        delay: getNumberAndArbitrary()
      }],
      /**
       * Animation
       * @see https://tailwindcss.com/docs/animation
       */
      animate: [{
        animate: ["none", "spin", "ping", "pulse", "bounce", isArbitraryValue]
      }],
      // Transforms
      /**
       * Transform
       * @see https://tailwindcss.com/docs/transform
       */
      transform: [{
        transform: ["", "gpu", "none"]
      }],
      /**
       * Scale
       * @see https://tailwindcss.com/docs/scale
       */
      scale: [{
        scale: [scale]
      }],
      /**
       * Scale X
       * @see https://tailwindcss.com/docs/scale
       */
      "scale-x": [{
        "scale-x": [scale]
      }],
      /**
       * Scale Y
       * @see https://tailwindcss.com/docs/scale
       */
      "scale-y": [{
        "scale-y": [scale]
      }],
      /**
       * Rotate
       * @see https://tailwindcss.com/docs/rotate
       */
      rotate: [{
        rotate: [isInteger, isArbitraryValue]
      }],
      /**
       * Translate X
       * @see https://tailwindcss.com/docs/translate
       */
      "translate-x": [{
        "translate-x": [translate]
      }],
      /**
       * Translate Y
       * @see https://tailwindcss.com/docs/translate
       */
      "translate-y": [{
        "translate-y": [translate]
      }],
      /**
       * Skew X
       * @see https://tailwindcss.com/docs/skew
       */
      "skew-x": [{
        "skew-x": [skew]
      }],
      /**
       * Skew Y
       * @see https://tailwindcss.com/docs/skew
       */
      "skew-y": [{
        "skew-y": [skew]
      }],
      /**
       * Transform Origin
       * @see https://tailwindcss.com/docs/transform-origin
       */
      "transform-origin": [{
        origin: ["center", "top", "top-right", "right", "bottom-right", "bottom", "bottom-left", "left", "top-left", isArbitraryValue]
      }],
      // Interactivity
      /**
       * Accent Color
       * @see https://tailwindcss.com/docs/accent-color
       */
      accent: [{
        accent: ["auto", colors]
      }],
      /**
       * Appearance
       * @see https://tailwindcss.com/docs/appearance
       */
      appearance: [{
        appearance: ["none", "auto"]
      }],
      /**
       * Cursor
       * @see https://tailwindcss.com/docs/cursor
       */
      cursor: [{
        cursor: ["auto", "default", "pointer", "wait", "text", "move", "help", "not-allowed", "none", "context-menu", "progress", "cell", "crosshair", "vertical-text", "alias", "copy", "no-drop", "grab", "grabbing", "all-scroll", "col-resize", "row-resize", "n-resize", "e-resize", "s-resize", "w-resize", "ne-resize", "nw-resize", "se-resize", "sw-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "zoom-in", "zoom-out", isArbitraryValue]
      }],
      /**
       * Caret Color
       * @see https://tailwindcss.com/docs/just-in-time-mode#caret-color-utilities
       */
      "caret-color": [{
        caret: [colors]
      }],
      /**
       * Pointer Events
       * @see https://tailwindcss.com/docs/pointer-events
       */
      "pointer-events": [{
        "pointer-events": ["none", "auto"]
      }],
      /**
       * Resize
       * @see https://tailwindcss.com/docs/resize
       */
      resize: [{
        resize: ["none", "y", "x", ""]
      }],
      /**
       * Scroll Behavior
       * @see https://tailwindcss.com/docs/scroll-behavior
       */
      "scroll-behavior": [{
        scroll: ["auto", "smooth"]
      }],
      /**
       * Scroll Margin
       * @see https://tailwindcss.com/docs/scroll-margin
       */
      "scroll-m": [{
        "scroll-m": getSpacingWithArbitrary()
      }],
      /**
       * Scroll Margin X
       * @see https://tailwindcss.com/docs/scroll-margin
       */
      "scroll-mx": [{
        "scroll-mx": getSpacingWithArbitrary()
      }],
      /**
       * Scroll Margin Y
       * @see https://tailwindcss.com/docs/scroll-margin
       */
      "scroll-my": [{
        "scroll-my": getSpacingWithArbitrary()
      }],
      /**
       * Scroll Margin Start
       * @see https://tailwindcss.com/docs/scroll-margin
       */
      "scroll-ms": [{
        "scroll-ms": getSpacingWithArbitrary()
      }],
      /**
       * Scroll Margin End
       * @see https://tailwindcss.com/docs/scroll-margin
       */
      "scroll-me": [{
        "scroll-me": getSpacingWithArbitrary()
      }],
      /**
       * Scroll Margin Top
       * @see https://tailwindcss.com/docs/scroll-margin
       */
      "scroll-mt": [{
        "scroll-mt": getSpacingWithArbitrary()
      }],
      /**
       * Scroll Margin Right
       * @see https://tailwindcss.com/docs/scroll-margin
       */
      "scroll-mr": [{
        "scroll-mr": getSpacingWithArbitrary()
      }],
      /**
       * Scroll Margin Bottom
       * @see https://tailwindcss.com/docs/scroll-margin
       */
      "scroll-mb": [{
        "scroll-mb": getSpacingWithArbitrary()
      }],
      /**
       * Scroll Margin Left
       * @see https://tailwindcss.com/docs/scroll-margin
       */
      "scroll-ml": [{
        "scroll-ml": getSpacingWithArbitrary()
      }],
      /**
       * Scroll Padding
       * @see https://tailwindcss.com/docs/scroll-padding
       */
      "scroll-p": [{
        "scroll-p": getSpacingWithArbitrary()
      }],
      /**
       * Scroll Padding X
       * @see https://tailwindcss.com/docs/scroll-padding
       */
      "scroll-px": [{
        "scroll-px": getSpacingWithArbitrary()
      }],
      /**
       * Scroll Padding Y
       * @see https://tailwindcss.com/docs/scroll-padding
       */
      "scroll-py": [{
        "scroll-py": getSpacingWithArbitrary()
      }],
      /**
       * Scroll Padding Start
       * @see https://tailwindcss.com/docs/scroll-padding
       */
      "scroll-ps": [{
        "scroll-ps": getSpacingWithArbitrary()
      }],
      /**
       * Scroll Padding End
       * @see https://tailwindcss.com/docs/scroll-padding
       */
      "scroll-pe": [{
        "scroll-pe": getSpacingWithArbitrary()
      }],
      /**
       * Scroll Padding Top
       * @see https://tailwindcss.com/docs/scroll-padding
       */
      "scroll-pt": [{
        "scroll-pt": getSpacingWithArbitrary()
      }],
      /**
       * Scroll Padding Right
       * @see https://tailwindcss.com/docs/scroll-padding
       */
      "scroll-pr": [{
        "scroll-pr": getSpacingWithArbitrary()
      }],
      /**
       * Scroll Padding Bottom
       * @see https://tailwindcss.com/docs/scroll-padding
       */
      "scroll-pb": [{
        "scroll-pb": getSpacingWithArbitrary()
      }],
      /**
       * Scroll Padding Left
       * @see https://tailwindcss.com/docs/scroll-padding
       */
      "scroll-pl": [{
        "scroll-pl": getSpacingWithArbitrary()
      }],
      /**
       * Scroll Snap Align
       * @see https://tailwindcss.com/docs/scroll-snap-align
       */
      "snap-align": [{
        snap: ["start", "end", "center", "align-none"]
      }],
      /**
       * Scroll Snap Stop
       * @see https://tailwindcss.com/docs/scroll-snap-stop
       */
      "snap-stop": [{
        snap: ["normal", "always"]
      }],
      /**
       * Scroll Snap Type
       * @see https://tailwindcss.com/docs/scroll-snap-type
       */
      "snap-type": [{
        snap: ["none", "x", "y", "both"]
      }],
      /**
       * Scroll Snap Type Strictness
       * @see https://tailwindcss.com/docs/scroll-snap-type
       */
      "snap-strictness": [{
        snap: ["mandatory", "proximity"]
      }],
      /**
       * Touch Action
       * @see https://tailwindcss.com/docs/touch-action
       */
      touch: [{
        touch: ["auto", "none", "manipulation"]
      }],
      /**
       * Touch Action X
       * @see https://tailwindcss.com/docs/touch-action
       */
      "touch-x": [{
        "touch-pan": ["x", "left", "right"]
      }],
      /**
       * Touch Action Y
       * @see https://tailwindcss.com/docs/touch-action
       */
      "touch-y": [{
        "touch-pan": ["y", "up", "down"]
      }],
      /**
       * Touch Action Pinch Zoom
       * @see https://tailwindcss.com/docs/touch-action
       */
      "touch-pz": ["touch-pinch-zoom"],
      /**
       * User Select
       * @see https://tailwindcss.com/docs/user-select
       */
      select: [{
        select: ["none", "text", "all", "auto"]
      }],
      /**
       * Will Change
       * @see https://tailwindcss.com/docs/will-change
       */
      "will-change": [{
        "will-change": ["auto", "scroll", "contents", "transform", isArbitraryValue]
      }],
      // SVG
      /**
       * Fill
       * @see https://tailwindcss.com/docs/fill
       */
      fill: [{
        fill: [colors, "none"]
      }],
      /**
       * Stroke Width
       * @see https://tailwindcss.com/docs/stroke-width
       */
      "stroke-w": [{
        stroke: [isLength, isArbitraryLength, isArbitraryNumber]
      }],
      /**
       * Stroke
       * @see https://tailwindcss.com/docs/stroke
       */
      stroke: [{
        stroke: [colors, "none"]
      }],
      // Accessibility
      /**
       * Screen Readers
       * @see https://tailwindcss.com/docs/screen-readers
       */
      sr: ["sr-only", "not-sr-only"],
      /**
       * Forced Color Adjust
       * @see https://tailwindcss.com/docs/forced-color-adjust
       */
      "forced-color-adjust": [{
        "forced-color-adjust": ["auto", "none"]
      }]
    },
    conflictingClassGroups: {
      overflow: ["overflow-x", "overflow-y"],
      overscroll: ["overscroll-x", "overscroll-y"],
      inset: ["inset-x", "inset-y", "start", "end", "top", "right", "bottom", "left"],
      "inset-x": ["right", "left"],
      "inset-y": ["top", "bottom"],
      flex: ["basis", "grow", "shrink"],
      gap: ["gap-x", "gap-y"],
      p: ["px", "py", "ps", "pe", "pt", "pr", "pb", "pl"],
      px: ["pr", "pl"],
      py: ["pt", "pb"],
      m: ["mx", "my", "ms", "me", "mt", "mr", "mb", "ml"],
      mx: ["mr", "ml"],
      my: ["mt", "mb"],
      size: ["w", "h"],
      "font-size": ["leading"],
      "fvn-normal": ["fvn-ordinal", "fvn-slashed-zero", "fvn-figure", "fvn-spacing", "fvn-fraction"],
      "fvn-ordinal": ["fvn-normal"],
      "fvn-slashed-zero": ["fvn-normal"],
      "fvn-figure": ["fvn-normal"],
      "fvn-spacing": ["fvn-normal"],
      "fvn-fraction": ["fvn-normal"],
      "line-clamp": ["display", "overflow"],
      rounded: ["rounded-s", "rounded-e", "rounded-t", "rounded-r", "rounded-b", "rounded-l", "rounded-ss", "rounded-se", "rounded-ee", "rounded-es", "rounded-tl", "rounded-tr", "rounded-br", "rounded-bl"],
      "rounded-s": ["rounded-ss", "rounded-es"],
      "rounded-e": ["rounded-se", "rounded-ee"],
      "rounded-t": ["rounded-tl", "rounded-tr"],
      "rounded-r": ["rounded-tr", "rounded-br"],
      "rounded-b": ["rounded-br", "rounded-bl"],
      "rounded-l": ["rounded-tl", "rounded-bl"],
      "border-spacing": ["border-spacing-x", "border-spacing-y"],
      "border-w": ["border-w-s", "border-w-e", "border-w-t", "border-w-r", "border-w-b", "border-w-l"],
      "border-w-x": ["border-w-r", "border-w-l"],
      "border-w-y": ["border-w-t", "border-w-b"],
      "border-color": ["border-color-s", "border-color-e", "border-color-t", "border-color-r", "border-color-b", "border-color-l"],
      "border-color-x": ["border-color-r", "border-color-l"],
      "border-color-y": ["border-color-t", "border-color-b"],
      "scroll-m": ["scroll-mx", "scroll-my", "scroll-ms", "scroll-me", "scroll-mt", "scroll-mr", "scroll-mb", "scroll-ml"],
      "scroll-mx": ["scroll-mr", "scroll-ml"],
      "scroll-my": ["scroll-mt", "scroll-mb"],
      "scroll-p": ["scroll-px", "scroll-py", "scroll-ps", "scroll-pe", "scroll-pt", "scroll-pr", "scroll-pb", "scroll-pl"],
      "scroll-px": ["scroll-pr", "scroll-pl"],
      "scroll-py": ["scroll-pt", "scroll-pb"],
      touch: ["touch-x", "touch-y", "touch-pz"],
      "touch-x": ["touch"],
      "touch-y": ["touch"],
      "touch-pz": ["touch"]
    },
    conflictingClassGroupModifiers: {
      "font-size": ["leading"]
    }
  };
};
const twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
function cn(...inputs) {
  return twMerge(clsx(inputs));
}
const Button = ({ className, variant = "primary", size = "md", ...props }) => {
  const variants = {
    primary: "bg-primary hover:bg-emerald-700 text-white shadow-sm",
    secondary: "bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-700",
    ghost: "text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-slate-900 dark:hover:text-slate-200",
    danger: "bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30"
  };
  const sizes = {
    sm: "px-3 py-1.5 text-xs font-medium",
    md: "px-4 py-2 text-sm font-medium",
    icon: "p-2"
  };
  return /* @__PURE__ */ jsx(
    "button",
    {
      className: cn(
        "rounded-md transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed",
        variants[variant],
        sizes[size],
        className
      ),
      ...props
    }
  );
};
const Input = ({ className, ...props }) => /* @__PURE__ */ jsx(
  "input",
  {
    className: cn(
      "w-full bg-transparent border-none focus:ring-0 p-0 text-sm font-mono text-slate-800 dark:text-slate-200 placeholder:text-slate-300 dark:placeholder:text-slate-600",
      className
    ),
    ...props
  }
);
const Modal = ({ isOpen, onClose, title, children }) => {
  if (!isOpen) return null;
  return /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4", children: /* @__PURE__ */ jsxs("div", { className: "bg-white dark:bg-slate-900 rounded-lg shadow-xl w-full max-w-md overflow-hidden animate-in fade-in zoom-in duration-200 ring-1 ring-slate-900/5 dark:ring-slate-800", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-b border-slate-100 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50", children: [
      /* @__PURE__ */ jsx("h3", { className: "font-semibold text-sm text-slate-800 dark:text-slate-200", children: title }),
      /* @__PURE__ */ jsx("button", { onClick: onClose, className: "text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 rounded-full p-1 hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors", children: /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
        /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
        /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
      ] }) })
    ] }),
    /* @__PURE__ */ jsx("div", { className: "p-4 max-h-[80vh] overflow-y-auto", children })
  ] }) });
};
const HeaderCell = ({ column, isFirst, isLast, onUpdate, isSelected }) => {
  const isInput = column.type === "input";
  return /* @__PURE__ */ jsx(
    "th",
    {
      tabIndex: 0,
      "data-dmn-col": column.id,
      className: `
        ${isSelected ? "ring-2 ring-inset ring-primary" : ""}
        relative p-0 border-r border-b border-slate-300 dark:border-slate-600 min-w-[150px]
        ${isInput ? "bg-slate-100 dark:bg-slate-800" : "bg-slate-200 dark:bg-slate-700"}
        ${isLast ? "border-r-0" : ""}
        focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary/40
      `,
      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full group", children: [
        /* @__PURE__ */ jsx("div", { className: "flex-1 p-2 flex items-center justify-center font-bold text-xs text-slate-700 dark:text-slate-200 uppercase tracking-wide", children: /* @__PURE__ */ jsx(
          "input",
          {
            type: "text",
            className: "bg-transparent text-center w-full focus:outline-none focus:border-b focus:border-primary",
            value: column.label,
            onChange: (e) => onUpdate == null ? void 0 : onUpdate(column.id, { label: e.target.value })
          }
        ) }),
        /* @__PURE__ */ jsxs("div", { className: "h-6 flex items-center justify-center border-t border-slate-300/50 dark:border-slate-600 text-[10px] text-slate-500 dark:text-slate-400 font-mono bg-white/30 dark:bg-slate-900/30 gap-1 px-2", children: [
          /* @__PURE__ */ jsx(
            "input",
            {
              className: "bg-transparent text-right w-1/2 focus:outline-none focus:text-primary hover:text-slate-700 dark:hover:text-slate-200",
              value: column.variableName || "",
              placeholder: "var_name",
              onChange: (e) => onUpdate == null ? void 0 : onUpdate(column.id, { variableName: e.target.value })
            }
          ),
          /* @__PURE__ */ jsx("span", { className: "text-slate-300 dark:text-slate-600", children: "|" }),
          /* @__PURE__ */ jsxs(
            "select",
            {
              value: column.dataType,
              onChange: (e) => onUpdate == null ? void 0 : onUpdate(column.id, { dataType: e.target.value }),
              className: "bg-transparent text-left w-1/2 focus:outline-none hover:text-primary cursor-pointer text-[10px] text-slate-500 dark:text-slate-400 font-mono",
              children: [
                /* @__PURE__ */ jsx("option", { value: "string", children: "string" }),
                /* @__PURE__ */ jsx("option", { value: "number", children: "number" }),
                /* @__PURE__ */ jsx("option", { value: "boolean", children: "boolean" }),
                /* @__PURE__ */ jsx("option", { value: "date", children: "date" })
              ]
            }
          )
        ] })
      ] })
    }
  );
};
const HitPolicyCell = ({ policy, onClick }) => {
  const policyCodes = {
    UNIQUE: "U",
    FIRST: "F",
    PRIORITY: "P",
    ANY: "A",
    COLLECT: "C",
    "RULE ORDER": "R",
    "OUTPUT ORDER": "O"
  };
  return /* @__PURE__ */ jsx(
    "th",
    {
      tabIndex: 0,
      className: "w-12 bg-slate-800 dark:bg-slate-800 text-white border-r border-b border-slate-600 dark:border-slate-600 cursor-pointer hover:bg-slate-700 dark:hover:bg-slate-700 transition-colors z-10 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white/40",
      onClick,
      onKeyDown: (e) => {
        if (e.key === "Enter" || e.key === " ") onClick();
      },
      title: `Hit Policy: ${policy}`,
      children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-full font-bold text-lg font-mono", children: policyCodes[policy] || "?" })
    }
  );
};
const EditableCell = ({ value, onChange, isOutput, autoFocus, isInvalid, cellKey, isSelected }) => {
  const [editing, setEditing] = useState(false);
  const [tempValue, setTempValue] = useState(value);
  const inputRef = useRef(null);
  const tdRef = useRef(null);
  useEffect(() => {
    setTempValue(value);
  }, [value]);
  useEffect(() => {
    if (autoFocus) {
      setEditing(true);
    }
  }, [autoFocus]);
  useEffect(() => {
    if (editing && inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select();
    }
  }, [editing]);
  const handleBlur = () => {
    setEditing(false);
    onChange(tempValue);
  };
  const handleKeyDown = (e) => {
    var _a, _b, _c;
    if (e.key === "Enter") {
      (_a = inputRef.current) == null ? void 0 : _a.blur();
      (_b = tdRef.current) == null ? void 0 : _b.focus();
    }
    if (e.key === "Escape") {
      setTempValue(value);
      setEditing(false);
      (_c = tdRef.current) == null ? void 0 : _c.focus();
    }
  };
  const handleTdKeyDown = (e) => {
    if (!editing && (e.key === "Enter" || e.key === " ")) {
      e.preventDefault();
      setEditing(true);
    }
  };
  const handleFocus = (e) => {
    if (e.target === tdRef.current && !editing) {
      setEditing(true);
    }
  };
  return /* @__PURE__ */ jsx(
    "td",
    {
      ref: tdRef,
      tabIndex: editing ? -1 : 0,
      "data-dmn-cell": cellKey,
      onClick: () => setEditing(true),
      onFocus: handleFocus,
      onKeyDown: handleTdKeyDown,
      className: `
        border-r border-b border-slate-200 dark:border-slate-700 h-10 px-3 py-2 text-sm font-mono cursor-text min-w-[150px] transition-colors relative
        focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary/50
        ${isSelected ? "ring-2 ring-inset ring-primary bg-primary/5" : ""}
        ${isOutput ? "text-slate-600 dark:text-slate-300 bg-slate-50/50 dark:bg-slate-800/30 hover:bg-slate-100 dark:hover:bg-slate-800/60" : "text-slate-800 dark:text-slate-200 hover:bg-slate-50 dark:hover:bg-slate-800/40"}
        ${!value || value === "-" ? "text-slate-400 dark:text-slate-600 italic" : ""}
        ${editing ? "p-0 ring-2 ring-inset ring-primary" : ""}
        ${isInvalid ? "bg-red-50 dark:bg-red-950/40 text-red-600 dark:text-red-400 border-red-200 dark:border-red-900 ring-1 ring-inset ring-red-500" : ""}
      `,
      children: editing ? /* @__PURE__ */ jsx(
        "input",
        {
          ref: inputRef,
          value: tempValue,
          onChange: (e) => setTempValue(e.target.value),
          onBlur: handleBlur,
          onKeyDown: handleKeyDown,
          className: `absolute inset-0 w-full h-full px-3 py-2 text-sm font-mono focus:outline-none ${isInvalid ? "bg-red-50 dark:bg-red-900 text-red-700 dark:text-red-200" : "bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100"}`
        }
      ) : /* @__PURE__ */ jsx("div", { className: "truncate w-full", children: value || "-" })
    }
  );
};
/**
 * @license lucide-react v0.562.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
const toCamelCase = (string) => string.replace(
  /^([A-Z])|[\s-_]+(\w)/g,
  (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
);
const toPascalCase = (string) => {
  const camelCase = toCamelCase(string);
  return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
};
const mergeClasses = (...classes) => classes.filter((className, index, array) => {
  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
}).join(" ").trim();
const hasA11yProp = (props) => {
  for (const prop in props) {
    if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
      return true;
    }
  }
};
/**
 * @license lucide-react v0.562.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
var defaultAttributes = {
  xmlns: "http://www.w3.org/2000/svg",
  width: 24,
  height: 24,
  viewBox: "0 0 24 24",
  fill: "none",
  stroke: "currentColor",
  strokeWidth: 2,
  strokeLinecap: "round",
  strokeLinejoin: "round"
};
/**
 * @license lucide-react v0.562.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
const Icon = forwardRef(
  ({
    color = "currentColor",
    size = 24,
    strokeWidth = 2,
    absoluteStrokeWidth,
    className = "",
    children,
    iconNode,
    ...rest
  }, ref) => createElement(
    "svg",
    {
      ref,
      ...defaultAttributes,
      width: size,
      height: size,
      stroke: color,
      strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
      className: mergeClasses("lucide", className),
      ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
      ...rest
    },
    [
      ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
      ...Array.isArray(children) ? children : [children]
    ]
  )
);
/**
 * @license lucide-react v0.562.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
const createLucideIcon = (iconName, iconNode) => {
  const Component = forwardRef(
    ({ className, ...props }, ref) => createElement(Icon, {
      ref,
      iconNode,
      className: mergeClasses(
        `lucide-${toKebabCase(toPascalCase(iconName))}`,
        `lucide-${iconName}`,
        className
      ),
      ...props
    })
  );
  Component.displayName = toPascalCase(iconName);
  return Component;
};
/**
 * @license lucide-react v0.562.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
const __iconNode$c = [
  ["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
  ["path", { d: "M19 12H5", key: "x3x0zl" }]
];
const ArrowLeft = createLucideIcon("arrow-left", __iconNode$c);
/**
 * @license lucide-react v0.562.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
const __iconNode$b = [
  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
  ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
  ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
];
const CircleAlert = createLucideIcon("circle-alert", __iconNode$b);
/**
 * @license lucide-react v0.562.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
const __iconNode$a = [
  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
  ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
  ["path", { d: "M12 17h.01", key: "p32p05" }]
];
const CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode$a);
/**
 * @license lucide-react v0.562.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
const __iconNode$9 = [
  ["path", { d: "M12 15V3", key: "m9g1x1" }],
  ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
  ["path", { d: "m7 10 5 5 5-5", key: "brsn70" }]
];
const Download = createLucideIcon("download", __iconNode$9);
/**
 * @license lucide-react v0.562.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
const __iconNode$8 = [
  [
    "path",
    {
      d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
      key: "1oefj6"
    }
  ],
  ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }],
  ["path", { d: "M8 13h2", key: "yr2amv" }],
  ["path", { d: "M14 13h2", key: "un5t4a" }],
  ["path", { d: "M8 17h2", key: "2yhykz" }],
  ["path", { d: "M14 17h2", key: "10kma7" }]
];
const FileSpreadsheet = createLucideIcon("file-spreadsheet", __iconNode$8);
/**
 * @license lucide-react v0.562.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
const __iconNode$7 = [
  [
    "path",
    {
      d: "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401",
      key: "kfwtm"
    }
  ]
];
const Moon = createLucideIcon("moon", __iconNode$7);
/**
 * @license lucide-react v0.562.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
const __iconNode$6 = [
  [
    "path",
    {
      d: "M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z",
      key: "10ikf1"
    }
  ]
];
const Play = createLucideIcon("play", __iconNode$6);
/**
 * @license lucide-react v0.562.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
const __iconNode$5 = [
  ["path", { d: "M5 12h14", key: "1ays0h" }],
  ["path", { d: "M12 5v14", key: "s699le" }]
];
const Plus = createLucideIcon("plus", __iconNode$5);
/**
 * @license lucide-react v0.562.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
const __iconNode$4 = [
  ["path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8", key: "1357e3" }],
  ["path", { d: "M3 3v5h5", key: "1xhq8a" }]
];
const RotateCcw = createLucideIcon("rotate-ccw", __iconNode$4);
/**
 * @license lucide-react v0.562.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
const __iconNode$3 = [
  [
    "path",
    {
      d: "M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z",
      key: "1c8476"
    }
  ],
  ["path", { d: "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7", key: "1ydtos" }],
  ["path", { d: "M7 3v4a1 1 0 0 0 1 1h7", key: "t51u73" }]
];
const Save = createLucideIcon("save", __iconNode$3);
/**
 * @license lucide-react v0.562.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
const __iconNode$2 = [
  ["circle", { cx: "12", cy: "12", r: "4", key: "4exip2" }],
  ["path", { d: "M12 2v2", key: "tus03m" }],
  ["path", { d: "M12 20v2", key: "1lh1kg" }],
  ["path", { d: "m4.93 4.93 1.41 1.41", key: "149t6j" }],
  ["path", { d: "m17.66 17.66 1.41 1.41", key: "ptbguv" }],
  ["path", { d: "M2 12h2", key: "1t8f8n" }],
  ["path", { d: "M20 12h2", key: "1q8mjw" }],
  ["path", { d: "m6.34 17.66-1.41 1.41", key: "1m8zz5" }],
  ["path", { d: "m19.07 4.93-1.41 1.41", key: "1shlcs" }]
];
const Sun = createLucideIcon("sun", __iconNode$2);
/**
 * @license lucide-react v0.562.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
const __iconNode$1 = [
  ["path", { d: "M10 11v6", key: "nco0om" }],
  ["path", { d: "M14 11v6", key: "outv1u" }],
  ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
  ["path", { d: "M3 6h18", key: "d0wm0j" }],
  ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
];
const Trash2 = createLucideIcon("trash-2", __iconNode$1);
/**
 * @license lucide-react v0.562.0 - ISC
 *
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
const __iconNode = [
  ["path", { d: "M12 3v12", key: "1x0j5s" }],
  ["path", { d: "m17 8-5-5-5 5", key: "7q97r8" }],
  ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }]
];
const Upload = createLucideIcon("upload", __iconNode);
const validateCell = (value, dataType, columnType) => {
  const v = value.trim();
  if (v === "" || v === "-") return true;
  switch (dataType) {
    case "string":
      return true;
    case "boolean":
      return ["true", "false"].includes(v.toLowerCase());
    case "number":
      if (!isNaN(Number(v)) && v !== "") return true;
      if (columnType === "input") {
        if (/^(>|<|>=|<=)\s*-?\d+(\.\d+)?$/.test(v)) return true;
        if (/^(\[|\()\s*-?\d+(\.\d+)?\s*\.\.\s*-?\d+(\.\d+)?\s*(\]|\))$/.test(v)) return true;
        if (/^-?\d+(\.\d+)?(\s*,\s*-?\d+(\.\d+)?)*$/.test(v)) return true;
      }
      return false;
    case "date":
      const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
      if (!dateRegex.test(v)) return false;
      const date = new Date(v);
      return date instanceof Date && !isNaN(date.getTime());
    default:
      return true;
  }
};
const validateModel = (model) => {
  const invalidCells = {};
  let totalInvalid = 0;
  model.rules.forEach((rule) => {
    model.columns.forEach((col) => {
      const value = rule.cells[col.id] || "";
      const isValid = validateCell(value, col.dataType, col.type);
      if (!isValid) {
        invalidCells[`${rule.id}-${col.id}`] = true;
        totalInvalid++;
      }
    });
  });
  return {
    invalidCells,
    isValid: totalInvalid === 0,
    errorCount: totalInvalid
  };
};
const DecisionTable = ({ model, onModelChange, selection }) => {
  const [lastAddedRuleId, setLastAddedRuleId] = useState(null);
  const validation = useMemo(() => validateModel(model), [model]);
  const addRule = () => {
    const newId = `r${Date.now()}`;
    const newRule = {
      id: newId,
      cells: {}
    };
    model.columns.forEach((c) => newRule.cells[c.id] = "");
    setLastAddedRuleId(newId);
    onModelChange({
      ...model,
      rules: [...model.rules, newRule]
    });
  };
  const removeRule = (ruleId) => {
    onModelChange({
      ...model,
      rules: model.rules.filter((r2) => r2.id !== ruleId)
    });
  };
  const updateCell = (ruleId, colId, value) => {
    const updatedRules = model.rules.map((r2) => {
      if (r2.id === ruleId) {
        return {
          ...r2,
          cells: { ...r2.cells, [colId]: value }
        };
      }
      return r2;
    });
    onModelChange({ ...model, rules: updatedRules });
  };
  const addInputColumn = () => {
    const newCol = {
      id: `c${Date.now()}`,
      label: "New Input",
      type: "input",
      dataType: "string",
      variableName: "input"
    };
    const firstOutputIndex = model.columns.findIndex((c) => c.type === "output");
    const newColumns = [...model.columns];
    if (firstOutputIndex === -1) {
      newColumns.push(newCol);
    } else {
      newColumns.splice(firstOutputIndex, 0, newCol);
    }
    onModelChange({ ...model, columns: newColumns });
  };
  const addOutputColumn = () => {
    const newCol = {
      id: `c${Date.now()}`,
      label: "New Output",
      type: "output",
      dataType: "string",
      variableName: "output"
    };
    onModelChange({ ...model, columns: [...model.columns, newCol] });
  };
  const cycleHitPolicy = () => {
    const policies = ["UNIQUE", "FIRST", "PRIORITY", "ANY", "COLLECT"];
    const currentIdx = policies.indexOf(model.hitPolicy);
    const nextIdx = (currentIdx + 1) % policies.length;
    onModelChange({ ...model, hitPolicy: policies[nextIdx] });
  };
  const onColumnUpdate = (id, def) => {
    const newColumns = model.columns.map((c) => c.id === id ? { ...c, ...def } : c);
    onModelChange({ ...model, columns: newColumns });
  };
  const inputColumns = model.columns.filter((c) => c.type === "input");
  const outputColumns = model.columns.filter((c) => c.type === "output");
  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-full bg-slate-50 dark:bg-slate-950 overflow-hidden", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-2 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
        /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "secondary", onClick: addInputColumn, children: [
          /* @__PURE__ */ jsx(Plus, { size: 14 }),
          " Add Input"
        ] }),
        /* @__PURE__ */ jsxs(Button, { size: "sm", variant: "secondary", onClick: addOutputColumn, children: [
          /* @__PURE__ */ jsx(Plus, { size: 14 }),
          " Add Output"
        ] }),
        /* @__PURE__ */ jsx("div", { className: "w-px h-6 bg-slate-200 dark:bg-slate-700 mx-2" }),
        /* @__PURE__ */ jsx(Button, { size: "sm", variant: "secondary", onClick: () => {
        }, children: "Annotations" })
      ] }),
      !validation.isValid && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-3 py-1 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-xs font-semibold rounded-full border border-red-100 dark:border-red-800/50", children: [
        /* @__PURE__ */ jsx(CircleAlert, { size: 14 }),
        validation.errorCount,
        " Validation Error",
        validation.errorCount > 1 ? "s" : ""
      ] })
    ] }),
    /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto p-8", children: /* @__PURE__ */ jsx("div", { className: "inline-block min-w-full shadow-lg rounded-lg overflow-hidden border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-900", children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse", children: [
      /* @__PURE__ */ jsxs("thead", { children: [
        /* @__PURE__ */ jsxs("tr", { children: [
          /* @__PURE__ */ jsx(HitPolicyCell, { policy: model.hitPolicy, onClick: cycleHitPolicy }),
          inputColumns.length > 0 && /* @__PURE__ */ jsx(
            "th",
            {
              colSpan: inputColumns.length,
              className: "bg-slate-100 dark:bg-slate-800 text-slate-500 dark:text-slate-400 text-[10px] font-bold uppercase tracking-wider py-1 border-r border-b border-slate-300 dark:border-slate-600",
              children: "Input Expression (When)"
            }
          ),
          outputColumns.length > 0 && /* @__PURE__ */ jsx(
            "th",
            {
              colSpan: outputColumns.length,
              className: "bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-300 text-[10px] font-bold uppercase tracking-wider py-1 border-b border-slate-300 dark:border-slate-600",
              children: "Output Values (Then)"
            }
          ),
          /* @__PURE__ */ jsx("th", { className: "w-12 border-b border-slate-300 dark:border-slate-600 bg-slate-50 dark:bg-slate-900" })
        ] }),
        /* @__PURE__ */ jsxs("tr", { children: [
          /* @__PURE__ */ jsx("th", { className: "bg-slate-50 dark:bg-slate-900 border-r border-b border-slate-300 dark:border-slate-600 text-xs font-mono text-slate-400 dark:text-slate-500", children: "#" }),
          model.columns.map((col, idx) => /* @__PURE__ */ jsx(
            HeaderCell,
            {
              column: col,
              isLast: idx === model.columns.length - 1,
              onUpdate: onColumnUpdate,
              isSelected: selection == null ? void 0 : selection.columnIds.has(col.id)
            },
            col.id
          )),
          /* @__PURE__ */ jsx("th", { className: "bg-slate-50 dark:bg-slate-900 border-b border-slate-300 dark:border-slate-600 w-10" })
        ] })
      ] }),
      /* @__PURE__ */ jsxs("tbody", { children: [
        model.rules.map((rule, idx) => /* @__PURE__ */ jsxs(
          "tr",
          {
            "data-dmn-rule": rule.id,
            className: `group hover:bg-slate-50 dark:hover:bg-slate-900/50 ${(selection == null ? void 0 : selection.ruleIds.has(rule.id)) ? "ring-2 ring-inset ring-primary bg-primary/5" : ""}`,
            children: [
              /* @__PURE__ */ jsx("td", { className: "bg-white dark:bg-slate-900 border-r border-b border-slate-200 dark:border-slate-700 text-center text-xs font-mono text-slate-400 dark:text-slate-500 w-12 group-hover:bg-slate-100 dark:group-hover:bg-slate-800", children: idx + 1 }),
              model.columns.map((col, colIdx) => /* @__PURE__ */ jsx(
                EditableCell,
                {
                  value: rule.cells[col.id] || "",
                  onChange: (val) => updateCell(rule.id, col.id, val),
                  isOutput: col.type === "output",
                  autoFocus: rule.id === lastAddedRuleId && colIdx === 0,
                  isInvalid: validation.invalidCells[`${rule.id}-${col.id}`],
                  cellKey: `${rule.id}:${col.id}`,
                  isSelected: selection == null ? void 0 : selection.cells.has(`${rule.id}:${col.id}`)
                },
                `${rule.id}-${col.id}`
              )),
              /* @__PURE__ */ jsx("td", { className: "border-b border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 group-hover:bg-slate-100 dark:group-hover:bg-slate-800 text-center w-10", children: /* @__PURE__ */ jsx(
                "button",
                {
                  onClick: () => removeRule(rule.id),
                  className: "text-slate-300 dark:text-slate-600 hover:text-red-500 dark:hover:text-red-400 p-1 rounded opacity-0 group-hover:opacity-100 transition-all",
                  children: /* @__PURE__ */ jsx(Trash2, { size: 14 })
                }
              ) })
            ]
          },
          rule.id
        )),
        /* @__PURE__ */ jsxs("tr", { children: [
          /* @__PURE__ */ jsx("td", { className: "bg-slate-50 dark:bg-slate-900/50 border-r border-slate-200 dark:border-slate-700 text-center font-mono text-xs text-slate-400 dark:text-slate-600 py-2", children: "+" }),
          /* @__PURE__ */ jsx("td", { colSpan: model.columns.length + 1, className: "p-0 border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-900/50", children: /* @__PURE__ */ jsxs(
            "button",
            {
              onClick: addRule,
              className: "w-full h-8 text-xs font-bold text-slate-500 dark:text-slate-500 hover:text-primary dark:hover:text-primary hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors flex items-center justify-center gap-2 uppercase tracking-wide",
              children: [
                /* @__PURE__ */ jsx(Plus, { size: 14 }),
                " Add Rule"
              ]
            }
          ) })
        ] })
      ] })
    ] }) }) })
  ] });
};
const evaluateDmn = (model, inputs) => {
  const inputCols = model.columns.filter((c) => c.type === "input");
  const outputCols = model.columns.filter((c) => c.type === "output");
  const matches = [];
  for (const rule of model.rules) {
    let match = true;
    for (const col of inputCols) {
      const cellValue = rule.cells[col.id];
      const inputValue = inputs[col.variableName || col.label];
      if (!checkMatch(cellValue, inputValue, col.dataType)) {
        match = false;
        break;
      }
    }
    if (match) matches.push(rule);
  }
  if (matches.length === 0) return [];
  if (["UNIQUE", "FIRST", "PRIORITY"].includes(model.hitPolicy)) {
    return [extractOutputs(matches[0], outputCols)];
  }
  return matches.map((r2) => extractOutputs(r2, outputCols));
};
const extractOutputs = (rule, outputCols) => {
  const out = {};
  outputCols.forEach((c) => {
    out[c.variableName || c.label] = rule.cells[c.id];
  });
  return out;
};
const checkMatch = (cell, input, type) => {
  if (!cell || cell === "-" || cell.trim() === "") return true;
  const cleanCell = cell.trim();
  if (input === void 0 || input === null || input === "") return false;
  if (type === "string") {
    const target = cleanCell.replace(/^"(.*)"$/, "$1");
    return target === String(input);
  }
  if (type === "boolean") {
    const cellBool = cleanCell.toLowerCase() === "true";
    const inputBool = String(input).toLowerCase() === "true";
    return cellBool === inputBool;
  }
  if (type === "number") {
    const numInput = Number(input);
    if (isNaN(numInput)) return false;
    if (cleanCell.startsWith(">=")) return numInput >= Number(cleanCell.substring(2));
    if (cleanCell.startsWith("<=")) return numInput <= Number(cleanCell.substring(2));
    if (cleanCell.startsWith(">")) return numInput > Number(cleanCell.substring(1));
    if (cleanCell.startsWith("<")) return numInput < Number(cleanCell.substring(1));
    const rangeMatch = cleanCell.match(/^\[(\d+(?:\.\d+)?)\.\.(\d+(?:\.\d+)?)\]$/);
    if (rangeMatch) {
      return numInput >= Number(rangeMatch[1]) && numInput <= Number(rangeMatch[2]);
    }
    return numInput === Number(cleanCell);
  }
  return cleanCell == input;
};
const TestModal = ({ isOpen, onClose, model }) => {
  const inputCols = model.columns.filter((c) => c.type === "input");
  const [inputs, setInputs] = useState({});
  const [results, setResults] = useState(null);
  useEffect(() => {
    if (isOpen) {
      setResults(null);
    }
  }, [isOpen]);
  const handleInputChange = (key, value) => {
    setInputs((prev) => ({ ...prev, [key]: value }));
  };
  const runTest = () => {
    const evalResults = evaluateDmn(model, inputs);
    setResults(evalResults);
  };
  const reset = () => {
    setInputs({});
    setResults(null);
  };
  return /* @__PURE__ */ jsx(Modal, { isOpen, onClose, title: `Test ${model.name}`, children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
    /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
      inputCols.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-slate-500 dark:text-slate-400 text-sm", children: "No input columns defined." }),
      inputCols.map((col) => /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-2 items-center", children: [
        /* @__PURE__ */ jsx("label", { className: "text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase text-right col-span-1 truncate", title: col.label, children: col.label }),
        /* @__PURE__ */ jsx(
          Input,
          {
            type: col.dataType === "number" ? "number" : "text",
            placeholder: `(${col.dataType})`,
            className: "col-span-2 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded px-2 py-1.5 focus:ring-2 focus:ring-primary/20",
            value: inputs[col.variableName || col.label] || "",
            onChange: (e) => handleInputChange(col.variableName || col.label, e.target.value)
          }
        )
      ] }, col.id))
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-2 pt-2 border-t border-slate-100 dark:border-slate-800", children: [
      /* @__PURE__ */ jsxs(Button, { variant: "ghost", size: "sm", onClick: reset, children: [
        /* @__PURE__ */ jsx(RotateCcw, { size: 14 }),
        " Reset"
      ] }),
      /* @__PURE__ */ jsxs(Button, { variant: "primary", size: "sm", onClick: runTest, disabled: inputCols.length === 0, children: [
        /* @__PURE__ */ jsx(Play, { size: 14 }),
        " Run Test"
      ] })
    ] }),
    results && /* @__PURE__ */ jsxs("div", { className: "animate-in slide-in-from-top-2 duration-300", children: [
      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-2", children: [
        /* @__PURE__ */ jsx("h4", { className: "text-xs font-bold text-slate-600 dark:text-slate-300 uppercase", children: "Output Result" }),
        /* @__PURE__ */ jsxs("span", { className: "text-[10px] bg-slate-200 dark:bg-slate-700 text-slate-600 dark:text-slate-300 px-1.5 py-0.5 rounded-full", children: [
          results.length,
          " matched rules"
        ] })
      ] }),
      results.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 bg-slate-50 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded text-sm text-slate-500 dark:text-slate-400 italic text-center", children: "No rules matched the current inputs." }) : /* @__PURE__ */ jsx("div", { className: "space-y-2", children: results.map((res, idx) => /* @__PURE__ */ jsxs("div", { className: "bg-emerald-50/50 dark:bg-emerald-900/20 p-3 rounded border border-emerald-100/50 dark:border-emerald-800/30 shadow-sm text-sm", children: [
        /* @__PURE__ */ jsxs("div", { className: "text-[10px] text-emerald-600/50 dark:text-emerald-400/50 font-mono mb-1", children: [
          "MATCH #",
          idx + 1
        ] }),
        Object.entries(res).map(([k, v]) => /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center py-1 border-b border-emerald-100/30 dark:border-emerald-800/30 last:border-0", children: [
          /* @__PURE__ */ jsxs("span", { className: "text-slate-500 dark:text-emerald-200/70 font-medium", children: [
            k,
            ":"
          ] }),
          /* @__PURE__ */ jsx("span", { className: "font-bold text-emerald-700 dark:text-emerald-400 font-mono", children: String(v) })
        ] }, k))
      ] }, idx)) })
    ] })
  ] }) });
};
const HelpModal = ({ isOpen, onClose }) => {
  const sections = [
    {
      title: "General",
      rows: [
        { syntax: "-", description: "Matches any value (wildcard).", example: "-" },
        { syntax: "Value", description: "Exact match equality.", example: "100" }
      ]
    },
    {
      title: "Strings",
      rows: [
        { syntax: '"Text"', description: "String literals must be in double quotes.", example: '"Full Time"' }
      ]
    },
    {
      title: "Numbers (Input only)",
      rows: [
        { syntax: ">, <, >=, <=", description: "Comparisons.", example: "> 10" },
        { syntax: "[min..max]", description: "Inclusive range.", example: "[1..10]" },
        { syntax: "(min..max)", description: "Exclusive range.", example: "(0..5)" },
        { syntax: "val1, val2", description: "List of specific values.", example: "1, 5, 10" }
      ]
    },
    {
      title: "Booleans & Dates",
      rows: [
        { syntax: "true, false", description: "Boolean literals.", example: "true" },
        { syntax: "YYYY-MM-DD", description: "ISO Date format.", example: "2023-12-25" }
      ]
    }
  ];
  return /* @__PURE__ */ jsx(Modal, { isOpen, onClose, title: "FEEL Syntax Guide", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
    /* @__PURE__ */ jsx("p", { className: "text-sm text-slate-600 dark:text-slate-400", children: "The Friendly Enough Expression Language (FEEL) is used for defining decision logic in DMN tables. Use the following patterns in your input cells:" }),
    sections.map((section) => /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
      /* @__PURE__ */ jsx("h4", { className: "text-xs font-bold text-slate-800 dark:text-slate-200 uppercase tracking-wider", children: section.title }),
      /* @__PURE__ */ jsx("div", { className: "bg-slate-50 dark:bg-slate-800 rounded-lg border border-slate-200 dark:border-slate-700 overflow-hidden", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-left text-xs", children: [
        /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b border-slate-200 dark:border-slate-700 bg-slate-100/50 dark:bg-slate-900/50", children: [
          /* @__PURE__ */ jsx("th", { className: "px-3 py-2 font-semibold text-slate-700 dark:text-slate-300", children: "Syntax" }),
          /* @__PURE__ */ jsx("th", { className: "px-3 py-2 font-semibold text-slate-700 dark:text-slate-300", children: "Description" }),
          /* @__PURE__ */ jsx("th", { className: "px-3 py-2 font-semibold text-slate-700 dark:text-slate-300", children: "Example" })
        ] }) }),
        /* @__PURE__ */ jsx("tbody", { className: "divide-y divide-slate-200 dark:divide-slate-700", children: section.rows.map((row, i) => /* @__PURE__ */ jsxs("tr", { children: [
          /* @__PURE__ */ jsx("td", { className: "px-3 py-2 font-mono text-primary dark:text-emerald-400", children: row.syntax }),
          /* @__PURE__ */ jsx("td", { className: "px-3 py-2 text-slate-600 dark:text-slate-400", children: row.description }),
          /* @__PURE__ */ jsx("td", { className: "px-3 py-2 font-mono text-slate-500 dark:text-slate-500 bg-slate-100/20 dark:bg-slate-900/20", children: row.example })
        ] }, i)) })
      ] }) })
    ] }, section.title)),
    /* @__PURE__ */ jsxs("div", { className: "bg-blue-50 dark:bg-blue-900/20 p-3 rounded border border-blue-100 dark:border-blue-800/50 text-xs text-blue-700 dark:text-blue-300 flex items-start gap-3", children: [
      /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0 mt-0.5", children: [
        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
        /* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
        /* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
      ] }),
      /* @__PURE__ */ jsxs("div", { children: [
        /* @__PURE__ */ jsx("strong", { children: "Pro Tip:" }),
        ` Use the "-" symbol in any cell to indicate that the specific input value doesn't matter for that rule.`
      ] })
    ] })
  ] }) });
};
const INITIAL_DMN_XML = `<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="https://www.omg.org/spec/DMN/20191111/MODEL/" xmlns:dmndi="https://www.omg.org/spec/DMN/20191111/DMNDI/" xmlns:dc="http://www.omg.org/spec/DMN/20180521/DC/" id="definitions_1" name="definitions" namespace="http://camunda.org/schema/1.0/dmn">
  <decision id="decision_1" name="Employee Onboarding Eligibility">
    <decisionTable id="decisionTable_1" hitPolicy="UNIQUE">
      <input id="c1" label="Employee Type">
        <inputExpression id="inputExpression_1" typeRef="string">
          <text>empType</text>
        </inputExpression>
      </input>
      <input id="c2" label="Experience (Years)">
        <inputExpression id="inputExpression_2" typeRef="number">
          <text>expYears</text>
        </inputExpression>
      </input>
      <output id="c3" label="Eligible" name="isEligible" typeRef="boolean"/>
      <output id="c4" label="Bonus %" name="bonusPercent" typeRef="number"/>
      <rule id="r1">
        <inputEntry id="ue_1_1"><text>"Full Time"</text></inputEntry>
        <inputEntry id="ue_1_2"><text>&gt; 5</text></inputEntry>
        <outputEntry id="le_1_3"><text>true</text></outputEntry>
        <outputEntry id="le_1_4"><text>10</text></outputEntry>
      </rule>
      <rule id="r2">
        <inputEntry id="ue_2_1"><text>"Full Time"</text></inputEntry>
        <inputEntry id="ue_2_2"><text>&lt;= 5</text></inputEntry>
        <outputEntry id="le_2_3"><text>true</text></outputEntry>
        <outputEntry id="le_2_4"><text>5</text></outputEntry>
      </rule>
      <rule id="r3">
        <inputEntry id="ue_3_1"><text>"Contractor"</text></inputEntry>
        <inputEntry id="ue_3_2"><text>-</text></inputEntry>
        <outputEntry id="le_3_3"><text>false</text></outputEntry>
        <outputEntry id="le_3_4"><text>0</text></outputEntry>
      </rule>
      <rule id="r4">
        <inputEntry id="ue_4_1"><text>"Intern"</text></inputEntry>
        <inputEntry id="ue_4_2"><text>-</text></inputEntry>
        <outputEntry id="le_4_3"><text>true</text></outputEntry>
        <outputEntry id="le_4_4"><text>2</text></outputEntry>
      </rule>
    </decisionTable>
  </decision>
</definitions>`;
const parseDmnXml = (xmlStr) => {
  const parser = new DOMParser();
  const xmlDoc = parser.parseFromString(xmlStr, "text/xml");
  const definitions = xmlDoc.getElementsByTagName("definitions")[0];
  if (!definitions) throw new Error("Invalid DMN: No definitions found");
  const decisions = Array.from(xmlDoc.getElementsByTagName("decision"));
  const decision = decisions.find((d) => d.getElementsByTagName("decisionTable").length > 0);
  if (!decision) throw new Error("Invalid DMN: No decision with a table found");
  const decisionTable = decision.getElementsByTagName("decisionTable")[0];
  const model = {
    id: decision.getAttribute("id") || `d_${Date.now()}`,
    name: decision.getAttribute("name") || "Decision",
    hitPolicy: decisionTable.getAttribute("hitPolicy") || "UNIQUE",
    columns: [],
    rules: []
  };
  const inputElements = Array.from(decisionTable.children).filter((el) => el.tagName === "input");
  inputElements.forEach((input) => {
    const inputExpression = input.getElementsByTagName("inputExpression")[0];
    const textNode = inputExpression == null ? void 0 : inputExpression.getElementsByTagName("text")[0];
    model.columns.push({
      id: input.getAttribute("id") || `c_${Math.random().toString(36).substr(2, 9)}`,
      label: input.getAttribute("label") || "Input",
      variableName: (textNode == null ? void 0 : textNode.textContent) || "",
      type: "input",
      dataType: (inputExpression == null ? void 0 : inputExpression.getAttribute("typeRef")) || "string"
    });
  });
  const outputElements = Array.from(decisionTable.children).filter((el) => el.tagName === "output");
  outputElements.forEach((output) => {
    model.columns.push({
      id: output.getAttribute("id") || `c_${Math.random().toString(36).substr(2, 9)}`,
      label: output.getAttribute("label") || "Output",
      variableName: output.getAttribute("name") || "",
      type: "output",
      dataType: output.getAttribute("typeRef") || "string"
    });
  });
  const ruleElements = Array.from(decisionTable.children).filter((el) => el.tagName === "rule");
  ruleElements.forEach((rule) => {
    const ruleId = rule.getAttribute("id") || `r_${Math.random().toString(36).substr(2, 9)}`;
    const cells = {};
    const inputEntries = Array.from(rule.children).filter((el) => el.tagName === "inputEntry");
    const outputEntries = Array.from(rule.children).filter((el) => el.tagName === "outputEntry");
    const inputCols = model.columns.filter((c) => c.type === "input");
    inputCols.forEach((col, idx) => {
      var _a;
      const entry = inputEntries[idx];
      const text = (_a = entry == null ? void 0 : entry.getElementsByTagName("text")[0]) == null ? void 0 : _a.textContent;
      cells[col.id] = text || "";
    });
    const outputCols = model.columns.filter((c) => c.type === "output");
    outputCols.forEach((col, idx) => {
      var _a;
      const entry = outputEntries[idx];
      const text = (_a = entry == null ? void 0 : entry.getElementsByTagName("text")[0]) == null ? void 0 : _a.textContent;
      cells[col.id] = text || "";
    });
    model.rules.push({ id: ruleId, cells });
  });
  return model;
};
const generateDmnXml = (model) => {
  const inputCols = model.columns.filter((c) => c.type === "input");
  const outputCols = model.columns.filter((c) => c.type === "output");
  const escape = (str) => (str || "").replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&apos;");
  const inputsXml = inputCols.map((col) => `
      <input id="${col.id}" label="${escape(col.label)}">
        <inputExpression id="exp_${col.id}" typeRef="${col.dataType}">
          <text>${escape(col.variableName)}</text>
        </inputExpression>
      </input>`).join("");
  const outputsXml = outputCols.map((col) => `
      <output id="${col.id}" label="${escape(col.label)}" name="${escape(col.variableName)}" typeRef="${col.dataType}"/>`).join("");
  const rulesXml = model.rules.map((rule) => `
      <rule id="${rule.id}">
        ${inputCols.map((col, idx) => `
        <inputEntry id="in_${rule.id}_${idx}">
          <text>${escape(rule.cells[col.id])}</text>
        </inputEntry>`).join("")}
        ${outputCols.map((col, idx) => `
        <outputEntry id="out_${rule.id}_${idx}">
          <text>${escape(rule.cells[col.id])}</text>
        </outputEntry>`).join("")}
      </rule>`).join("");
  return `<?xml version="1.0" encoding="UTF-8"?>
<definitions xmlns="https://www.omg.org/spec/DMN/20191111/MODEL/" xmlns:dmndi="https://www.omg.org/spec/DMN/20191111/DMNDI/" xmlns:dc="http://www.omg.org/spec/DMN/20180521/DC/" id="definitions_${Date.now()}" name="definitions" namespace="http://camunda.org/schema/1.0/dmn">
  <decision id="${model.id || "decision_1"}" name="${escape(model.name)}">
    <decisionTable id="table_${model.id || "1"}" hitPolicy="${model.hitPolicy}">
      ${inputsXml}
      ${outputsXml}
      ${rulesXml}
    </decisionTable>
  </decision>
</definitions>`;
};
const COLUMN_TYPES = ["input", "output", "annotation"];
const DATA_TYPES = ["string", "number", "boolean", "date"];
const HIT_POLICIES = ["UNIQUE", "FIRST", "PRIORITY", "ANY", "COLLECT", "RULE ORDER", "OUTPUT ORDER"];
const ok = (result) => ({ ok: true, result });
const reject = (reason) => ({ ok: false, rejected: true, reason });
const DMN_DATA_ATTR = {
  column: "data-dmn-col",
  // on the column <th>
  rule: "data-dmn-rule",
  // on the rule <tr>
  cell: "data-dmn-cell"
  // on the cell <td>, value = `${ruleId}:${columnId}`
};
const escapeAttr = (value) => {
  const cssAny = typeof globalThis !== "undefined" ? globalThis.CSS : void 0;
  if (cssAny && typeof cssAny.escape === "function") return cssAny.escape(value);
  return value.replace(/["\\]/g, "\\$&");
};
const flashIntoView = (el) => {
  if (!el || typeof el.scrollIntoView !== "function") return false;
  try {
    el.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
  } catch {
    el.scrollIntoView();
  }
  const style = el.style;
  if (style) {
    const prevOutline = style.outline;
    const prevOffset = style.outlineOffset;
    style.outline = "2px solid #10b981";
    style.outlineOffset = "-2px";
    const w = typeof globalThis !== "undefined" ? globalThis : void 0;
    if (w && typeof w.setTimeout === "function") {
      w.setTimeout(() => {
        style.outline = prevOutline;
        style.outlineOffset = prevOffset;
      }, 1400);
    }
  }
  return true;
};
const resolveContainer = (access) => {
  if (access.getContainer) {
    const c = access.getContainer();
    if (c) return c;
  }
  const doc = typeof globalThis !== "undefined" ? globalThis.document : void 0;
  return doc ?? null;
};
const toStringArray = (value) => {
  if (value === void 0 || value === null) return [];
  if (!Array.isArray(value)) return null;
  if (!value.every((v) => typeof v === "string")) return null;
  return value;
};
const compactModel = (m) => ({
  id: m.id,
  name: m.name,
  hitPolicy: m.hitPolicy,
  columns: m.columns.map((c) => ({
    id: c.id,
    label: c.label,
    type: c.type,
    dataType: c.dataType,
    variableName: c.variableName
  })),
  rules: m.rules.map((r2) => ({
    id: r2.id,
    cells: m.columns.reduce((acc, c) => {
      acc[c.id] = r2.cells[c.id] ?? "";
      return acc;
    }, {})
  }))
});
let idCounter = 0;
const freshId = (prefix) => `${prefix}${Date.now()}_${idCounter++}`;
const describeInvalidCells = (model, invalidCells) => {
  const colById = new Map(model.columns.map((c) => [c.id, c]));
  return Object.keys(invalidCells).map((key) => {
    var _a;
    const dash = key.lastIndexOf("-");
    const ruleId = key.slice(0, dash);
    const colId = key.slice(dash + 1);
    const col = colById.get(colId);
    const value = ((_a = model.rules.find((r2) => r2.id === ruleId)) == null ? void 0 : _a.cells[colId]) ?? "";
    const where = col ? `column "${col.label}" (${col.dataType})` : `column "${colId}"`;
    return `rule "${ruleId}" / ${where}: value "${value}" is invalid`;
  });
};
const applyIfValid = (prev, next, setModel, result) => {
  const before = validateModel(prev);
  const after = validateModel(next);
  const newlyInvalid = Object.keys(after.invalidCells).filter((k) => !before.invalidCells[k]);
  if (newlyInvalid.length > 0) {
    const reasons = describeInvalidCells(next, Object.fromEntries(newlyInvalid.map((k) => [k, true])));
    return reject(`Change rejected: it introduces ${newlyInvalid.length} validation error(s): ${reasons.join("; ")}.`);
  }
  setModel(next);
  return ok(result);
};
function createDmnAiCapability(access) {
  const tools = [
    {
      name: "get_model",
      description: "Return the current DMN decision table as compact JSON: id, name, hitPolicy, columns (input/output/annotation, each with dataType + variableName) and rules (cells keyed by column id).",
      parameters: { type: "object", properties: {}, additionalProperties: false }
    },
    {
      name: "list_element_types",
      description: "List the valid column types, data types and hit policies this DMN editor supports.",
      parameters: { type: "object", properties: {}, additionalProperties: false }
    },
    {
      name: "add_column",
      description: "Add an input, output or annotation column. Inputs are inserted before the first output (matching the editor). Returns the new column id.",
      parameters: {
        type: "object",
        properties: {
          type: { type: "string", enum: COLUMN_TYPES, description: "Column type." },
          label: { type: "string", description: "Human-readable header label." },
          dataType: { type: "string", enum: DATA_TYPES, description: "FEEL data type. Defaults to string." },
          variableName: { type: "string", description: "FEEL variable / output name." }
        },
        required: ["type", "label"],
        additionalProperties: false
      }
    },
    {
      name: "update_column",
      description: "Update an existing column (label, dataType, variableName, type) by id.",
      parameters: {
        type: "object",
        properties: {
          id: { type: "string", description: "Column id to update." },
          label: { type: "string" },
          dataType: { type: "string", enum: DATA_TYPES },
          variableName: { type: "string" },
          type: { type: "string", enum: COLUMN_TYPES }
        },
        required: ["id"],
        additionalProperties: false
      }
    },
    {
      name: "delete_column",
      description: "Delete a column by id and drop its cells from every rule.",
      parameters: {
        type: "object",
        properties: { id: { type: "string", description: "Column id to delete." } },
        required: ["id"],
        additionalProperties: false
      }
    },
    {
      name: "add_rule",
      description: "Add a rule. Optionally provide cells (map of column id -> FEEL value). Unknown column ids and cells that fail the column dataType validation are rejected.",
      parameters: {
        type: "object",
        properties: {
          cells: {
            type: "object",
            description: "Map of column id -> cell value (FEEL text). Omitted columns default to empty.",
            additionalProperties: { type: "string" }
          }
        },
        additionalProperties: false
      }
    },
    {
      name: "update_rule",
      description: "Set cell values on an existing rule (map of column id -> value). Unknown column ids and values failing dataType validation are rejected.",
      parameters: {
        type: "object",
        properties: {
          id: { type: "string", description: "Rule id to update." },
          cells: { type: "object", additionalProperties: { type: "string" } }
        },
        required: ["id", "cells"],
        additionalProperties: false
      }
    },
    {
      name: "delete_rule",
      description: "Delete a rule by id.",
      parameters: {
        type: "object",
        properties: { id: { type: "string", description: "Rule id to delete." } },
        required: ["id"],
        additionalProperties: false
      }
    },
    {
      name: "set_hit_policy",
      description: "Set the decision table hit policy.",
      parameters: {
        type: "object",
        properties: { hitPolicy: { type: "string", enum: HIT_POLICIES } },
        required: ["hitPolicy"],
        additionalProperties: false
      }
    },
    {
      name: "validate",
      description: "Validate the whole model against the editor rules. Returns isValid, errorCount and the list of invalid {ruleId, columnId} cells.",
      parameters: { type: "object", properties: {}, additionalProperties: false }
    },
    {
      name: "replace_model",
      description: "Replace the ENTIRE model from JSON ({id,name,hitPolicy,columns,rules}). Validated structurally before applying; rejected if malformed.",
      parameters: {
        type: "object",
        properties: {
          model: { type: "object", description: "A full DmnModel JSON object." }
        },
        required: ["model"],
        additionalProperties: false
      }
    },
    // --- Navigation / viewport (non-mutating: never change the model) ---
    {
      name: "focus_cell",
      description: "Scroll a single cell into view and briefly highlight it so the user sees the cell you mean. Does NOT change the model. Rejects unknown rule or column ids.",
      parameters: {
        type: "object",
        properties: {
          ruleId: { type: "string", description: "Rule (row) id of the cell." },
          columnId: { type: "string", description: "Column id of the cell." }
        },
        required: ["ruleId", "columnId"],
        additionalProperties: false
      }
    },
    {
      name: "focus_column",
      description: "Scroll a column header into view and briefly highlight the whole column. Does NOT change the model. Rejects an unknown column id.",
      parameters: {
        type: "object",
        properties: {
          columnId: { type: "string", description: "Column id to reveal." }
        },
        required: ["columnId"],
        additionalProperties: false
      }
    },
    {
      name: "focus_rule",
      description: "Scroll a rule (row) into view and briefly highlight it. Does NOT change the model. Rejects an unknown rule id.",
      parameters: {
        type: "object",
        properties: {
          ruleId: { type: "string", description: "Rule id to reveal." }
        },
        required: ["ruleId"],
        additionalProperties: false
      }
    },
    // --- Selection / highlight (non-mutating persistent highlight) ---
    {
      name: "select",
      description: "Persistently highlight a set of columns, rules and/or cells so the user can see what you are referring to. Replaces any previous selection. Provide at least one of columnIds, ruleIds, cells. Does NOT change the model. Rejects any unknown column/rule id or malformed cell key.",
      parameters: {
        type: "object",
        properties: {
          columnIds: { type: "array", items: { type: "string" }, description: "Column ids to highlight." },
          ruleIds: { type: "array", items: { type: "string" }, description: "Rule ids to highlight." },
          cells: {
            type: "array",
            items: { type: "string" },
            description: 'Cell keys to highlight, each formatted "ruleId:columnId".'
          }
        },
        additionalProperties: false
      }
    },
    {
      name: "clear_selection",
      description: "Clear any highlighted columns, rules and cells. Does NOT change the model.",
      parameters: { type: "object", properties: {}, additionalProperties: false }
    }
  ];
  const guidelines = `This editor edits a single DMN decision table. The model is { id, name, hitPolicy, columns[], rules[] }. Columns have a type (${COLUMN_TYPES.join("/")}) and a dataType (${DATA_TYPES.join("/")}); inputs come before outputs. Rules hold cells keyed by column id (FEEL text; "" or "-" means wildcard). Valid hit policies: ${HIT_POLICIES.join(", ")}. Use get_model / list_element_types first. Mutations (add/update/delete column or rule, set_hit_policy, replace_model) are validated by the editor and rejected with a reason on unknown ids, bad types, or cell values that violate the column dataType. Use validate to surface current errors. To show the user where something is WITHOUT changing the model, use the navigation tools (focus_cell / focus_column / focus_rule scroll-into-view + briefly flash the target) and the selection tools (select highlights a set of columns/rules/cells; clear_selection removes it). Navigation/selection never mutate the model and reject unknown ids with a reason.`;
  const invoke = async (toolName, args) => {
    const model = access.getModel();
    if (!model) return reject("The DMN model is not loaded yet.");
    const a = args || {};
    switch (toolName) {
      case "get_model":
        return ok(compactModel(model));
      case "list_element_types":
        return ok({ columnTypes: COLUMN_TYPES, dataTypes: DATA_TYPES, hitPolicies: HIT_POLICIES });
      case "add_column": {
        const type = a.type;
        const label = a.label;
        if (!COLUMN_TYPES.includes(type)) return reject(`Unknown column type "${String(a.type)}". Valid: ${COLUMN_TYPES.join(", ")}.`);
        if (typeof label !== "string" || label.trim() === "") return reject("label is required and must be a non-empty string.");
        const dataType = a.dataType ?? "string";
        if (!DATA_TYPES.includes(dataType)) return reject(`Unknown dataType "${String(a.dataType)}". Valid: ${DATA_TYPES.join(", ")}.`);
        const variableName = a.variableName !== void 0 ? String(a.variableName) : type === "output" ? "output" : "input";
        const newCol = { id: freshId("c"), label, type, dataType, variableName };
        const columns = [...model.columns];
        if (type === "input") {
          const firstOutputIndex = columns.findIndex((c) => c.type === "output");
          if (firstOutputIndex === -1) columns.push(newCol);
          else columns.splice(firstOutputIndex, 0, newCol);
        } else {
          columns.push(newCol);
        }
        const rules = model.rules.map((r2) => ({ ...r2, cells: { ...r2.cells, [newCol.id]: "" } }));
        return applyIfValid(model, { ...model, columns, rules }, access.setModel, { id: newCol.id });
      }
      case "update_column": {
        const id = a.id;
        const target = model.columns.find((c) => c.id === id);
        if (!target) return reject(`No column with id "${String(id)}".`);
        const patch = {};
        if (a.label !== void 0) {
          if (typeof a.label !== "string" || a.label.trim() === "") return reject("label must be a non-empty string.");
          patch.label = a.label;
        }
        if (a.dataType !== void 0) {
          if (!DATA_TYPES.includes(a.dataType)) return reject(`Unknown dataType "${String(a.dataType)}".`);
          patch.dataType = a.dataType;
        }
        if (a.type !== void 0) {
          if (!COLUMN_TYPES.includes(a.type)) return reject(`Unknown column type "${String(a.type)}".`);
          patch.type = a.type;
        }
        if (a.variableName !== void 0) patch.variableName = String(a.variableName);
        const columns = model.columns.map((c) => c.id === id ? { ...c, ...patch } : c);
        const next = { ...model, columns };
        return applyIfValid(model, next, access.setModel, { id });
      }
      case "delete_column": {
        const id = a.id;
        if (!model.columns.some((c) => c.id === id)) return reject(`No column with id "${String(id)}".`);
        const columns = model.columns.filter((c) => c.id !== id);
        const rules = model.rules.map((r2) => {
          const cells = { ...r2.cells };
          delete cells[id];
          return { ...r2, cells };
        });
        return applyIfValid(model, { ...model, columns, rules }, access.setModel, { deleted: id });
      }
      case "add_rule": {
        const cellsIn = a.cells ?? {};
        const cells = {};
        model.columns.forEach((c) => cells[c.id] = "");
        for (const [colId, raw] of Object.entries(cellsIn)) {
          const col = model.columns.find((c) => c.id === colId);
          if (!col) return reject(`Rule references unknown column id "${colId}".`);
          const value = raw == null ? "" : String(raw);
          if (!validateCell(value, col.dataType, col.type)) {
            return reject(`Value "${value}" is invalid for column "${col.label}" (${col.dataType}).`);
          }
          cells[colId] = value;
        }
        const newRule = { id: freshId("r"), cells };
        return applyIfValid(model, { ...model, rules: [...model.rules, newRule] }, access.setModel, { id: newRule.id });
      }
      case "update_rule": {
        const id = a.id;
        const target = model.rules.find((r2) => r2.id === id);
        if (!target) return reject(`No rule with id "${String(id)}".`);
        const cellsIn = a.cells;
        if (!cellsIn || typeof cellsIn !== "object") return reject("cells must be an object of columnId -> value.");
        const nextCells = { ...target.cells };
        for (const [colId, raw] of Object.entries(cellsIn)) {
          const col = model.columns.find((c) => c.id === colId);
          if (!col) return reject(`Update references unknown column id "${colId}".`);
          const value = raw == null ? "" : String(raw);
          if (!validateCell(value, col.dataType, col.type)) {
            return reject(`Value "${value}" is invalid for column "${col.label}" (${col.dataType}).`);
          }
          nextCells[colId] = value;
        }
        const rules = model.rules.map((r2) => r2.id === id ? { ...r2, cells: nextCells } : r2);
        return applyIfValid(model, { ...model, rules }, access.setModel, { id });
      }
      case "delete_rule": {
        const id = a.id;
        if (!model.rules.some((r2) => r2.id === id)) return reject(`No rule with id "${String(id)}".`);
        return applyIfValid(model, { ...model, rules: model.rules.filter((r2) => r2.id !== id) }, access.setModel, { deleted: id });
      }
      case "set_hit_policy": {
        const hp = a.hitPolicy;
        if (!HIT_POLICIES.includes(hp)) return reject(`Unknown hit policy "${String(a.hitPolicy)}". Valid: ${HIT_POLICIES.join(", ")}.`);
        return applyIfValid(model, { ...model, hitPolicy: hp }, access.setModel, { hitPolicy: hp });
      }
      case "validate": {
        const v = validateModel(model);
        const invalid = Object.keys(v.invalidCells).map((key) => {
          const dash = key.lastIndexOf("-");
          return { ruleId: key.slice(0, dash), columnId: key.slice(dash + 1) };
        });
        return ok({ isValid: v.isValid, errorCount: v.errorCount, invalidCells: invalid });
      }
      case "replace_model": {
        const candidate = a.model;
        const err = validateModelShape(candidate);
        if (err) return reject(err);
        const nextModel = candidate;
        const v = validateModel(nextModel);
        if (!v.isValid) {
          const reasons = describeInvalidCells(nextModel, v.invalidCells);
          return reject(`Replacement rejected: model has ${v.errorCount} invalid cell(s): ${reasons.join("; ")}.`);
        }
        access.setModel(nextModel);
        return ok(compactModel(nextModel));
      }
      case "focus_cell": {
        const ruleId = String(a.ruleId ?? "");
        const columnId = String(a.columnId ?? "");
        if (!model.rules.some((r2) => r2.id === ruleId)) return reject(`No rule with id "${ruleId}".`);
        if (!model.columns.some((c) => c.id === columnId)) return reject(`No column with id "${columnId}".`);
        const root = resolveContainer(access);
        if (!root) return ok({ focused: false, reason: "No DOM container available (headless)." });
        const el = root.querySelector(`[${DMN_DATA_ATTR.cell}="${escapeAttr(`${ruleId}:${columnId}`)}"]`);
        if (!el) return reject(`Cell "${ruleId}:${columnId}" is not currently rendered.`);
        return ok({ focused: flashIntoView(el), cell: `${ruleId}:${columnId}` });
      }
      case "focus_column": {
        const columnId = String(a.columnId ?? "");
        if (!model.columns.some((c) => c.id === columnId)) return reject(`No column with id "${columnId}".`);
        const root = resolveContainer(access);
        if (!root) return ok({ focused: false, reason: "No DOM container available (headless)." });
        const el = root.querySelector(`[${DMN_DATA_ATTR.column}="${escapeAttr(columnId)}"]`);
        if (!el) return reject(`Column "${columnId}" is not currently rendered.`);
        return ok({ focused: flashIntoView(el), columnId });
      }
      case "focus_rule": {
        const ruleId = String(a.ruleId ?? "");
        if (!model.rules.some((r2) => r2.id === ruleId)) return reject(`No rule with id "${ruleId}".`);
        const root = resolveContainer(access);
        if (!root) return ok({ focused: false, reason: "No DOM container available (headless)." });
        const el = root.querySelector(`[${DMN_DATA_ATTR.rule}="${escapeAttr(ruleId)}"]`);
        if (!el) return reject(`Rule "${ruleId}" is not currently rendered.`);
        return ok({ focused: flashIntoView(el), ruleId });
      }
      case "select": {
        if (!access.setSelection) return reject("Selection is not supported by this editor host.");
        const columnIds = toStringArray(a.columnIds);
        const ruleIds = toStringArray(a.ruleIds);
        const cells = toStringArray(a.cells);
        if (columnIds === null || ruleIds === null || cells === null) {
          return reject("columnIds, ruleIds and cells must each be arrays of strings.");
        }
        if (columnIds.length === 0 && ruleIds.length === 0 && cells.length === 0) {
          return reject("Provide at least one of columnIds, ruleIds or cells to select.");
        }
        const colSet = new Set(model.columns.map((c) => c.id));
        const ruleSet = new Set(model.rules.map((r2) => r2.id));
        for (const id of columnIds) if (!colSet.has(id)) return reject(`No column with id "${id}".`);
        for (const id of ruleIds) if (!ruleSet.has(id)) return reject(`No rule with id "${id}".`);
        for (const key of cells) {
          const sep = key.indexOf(":");
          if (sep === -1) return reject(`Cell key "${key}" must be formatted "ruleId:columnId".`);
          const rId = key.slice(0, sep);
          const cId = key.slice(sep + 1);
          if (!ruleSet.has(rId)) return reject(`Cell "${key}" references unknown rule id "${rId}".`);
          if (!colSet.has(cId)) return reject(`Cell "${key}" references unknown column id "${cId}".`);
        }
        access.setSelection({ columnIds, ruleIds, cells });
        return ok({ columnIds, ruleIds, cells });
      }
      case "clear_selection": {
        if (!access.setSelection) return reject("Selection is not supported by this editor host.");
        access.setSelection({ columnIds: [], ruleIds: [], cells: [] });
        return ok({ cleared: true });
      }
      default:
        return reject(`Unknown tool "${toolName}".`);
    }
  };
  return { kind: "dmn", guidelines, tools, invoke };
}
function validateModelShape(value) {
  if (typeof value !== "object" || value === null) return "model must be a JSON object.";
  const m = value;
  if (typeof m.id !== "string") return "model.id must be a string.";
  if (typeof m.name !== "string") return "model.name must be a string.";
  if (!HIT_POLICIES.includes(m.hitPolicy)) return `model.hitPolicy must be one of: ${HIT_POLICIES.join(", ")}.`;
  if (!Array.isArray(m.columns)) return "model.columns must be an array.";
  if (!Array.isArray(m.rules)) return "model.rules must be an array.";
  const colIds = /* @__PURE__ */ new Set();
  for (const c of m.columns) {
    if (typeof c !== "object" || c === null) return "each column must be an object.";
    const col = c;
    if (typeof col.id !== "string") return "each column needs a string id.";
    if (colIds.has(col.id)) return `duplicate column id "${col.id}".`;
    colIds.add(col.id);
    if (typeof col.label !== "string") return `column "${col.id}" needs a string label.`;
    if (!COLUMN_TYPES.includes(col.type)) return `column "${col.id}" has invalid type.`;
    if (!DATA_TYPES.includes(col.dataType)) return `column "${col.id}" has invalid dataType.`;
  }
  for (const r2 of m.rules) {
    if (typeof r2 !== "object" || r2 === null) return "each rule must be an object.";
    const rule = r2;
    if (typeof rule.id !== "string") return "each rule needs a string id.";
    if (typeof rule.cells !== "object" || rule.cells === null) return `rule "${rule.id}" needs a cells object.`;
    for (const [key, cellValue] of Object.entries(rule.cells)) {
      if (!colIds.has(key)) return `rule "${rule.id}" references unknown column id "${key}".`;
      if (typeof cellValue !== "string") return `rule "${rule.id}" cell for column "${key}" must be a string.`;
    }
  }
  return null;
}
function useDmnAiCapability(model, setModel, onReady, getContainer, setSelection) {
  const modelRef = useRef(model);
  modelRef.current = model;
  const setModelRef = useRef(setModel);
  setModelRef.current = setModel;
  const onReadyRef = useRef(onReady);
  onReadyRef.current = onReady;
  const getContainerRef = useRef(getContainer);
  getContainerRef.current = getContainer;
  const setSelectionRef = useRef(setSelection);
  setSelectionRef.current = setSelection;
  const capRef = useRef(null);
  if (capRef.current === null) {
    capRef.current = createDmnAiCapability({
      getModel: () => modelRef.current,
      setModel: (m) => setModelRef.current(m),
      getContainer: () => getContainerRef.current ? getContainerRef.current() : null,
      setSelection: (s) => {
        var _a;
        return (_a = setSelectionRef.current) == null ? void 0 : _a.call(setSelectionRef, s);
      }
    });
  }
  useEffect(() => {
    var _a;
    (_a = onReadyRef.current) == null ? void 0 : _a.call(onReadyRef, capRef.current);
    return () => {
      var _a2;
      return (_a2 = onReadyRef.current) == null ? void 0 : _a2.call(onReadyRef, null);
    };
  }, []);
}
const Header = ({
  model,
  onImport,
  onExport,
  onSave,
  onBack,
  onToggleTheme,
  isDarkMode,
  onTest,
  onHelp,
  showThemeToggle,
  isValid
}) => /* @__PURE__ */ jsxs("header", { className: "h-16 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 flex items-center justify-between px-4 sticky top-0 z-30 transition-colors", children: [
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
    /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", onClick: onBack, className: "text-slate-400 hover:text-slate-700 dark:text-slate-500 dark:hover:text-slate-300", children: /* @__PURE__ */ jsx(ArrowLeft, { size: 20 }) }),
    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-primary hover:text-emerald-700 cursor-pointer transition-colors", children: [
      /* @__PURE__ */ jsx("div", { className: "bg-primary/10 p-2 rounded-lg", children: /* @__PURE__ */ jsx(FileSpreadsheet, { size: 20, className: "text-primary" }) }),
      /* @__PURE__ */ jsx("h1", { className: "text-lg font-bold tracking-tight text-slate-800 dark:text-slate-100", children: "Peak DMN" })
    ] }),
    /* @__PURE__ */ jsx("div", { className: "h-8 w-px bg-slate-200 dark:bg-slate-700 mx-2" }),
    /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-slate-700 dark:text-slate-400", children: (model == null ? void 0 : model.name) || "Loading..." })
  ] }),
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
    /* @__PURE__ */ jsx("div", { className: "flex items-center bg-slate-50 dark:bg-slate-800/50 rounded-md border border-slate-200 dark:border-slate-700 p-1 mr-4", children: /* @__PURE__ */ jsxs(
      "button",
      {
        onClick: onTest,
        disabled: !model,
        className: "flex items-center gap-2 px-3 py-1.5 bg-white dark:bg-slate-800 text-emerald-700 dark:text-emerald-400 rounded shadow-sm text-xs font-bold uppercase tracking-wide border border-slate-100 dark:border-slate-700 hover:border-emerald-200 dark:hover:border-emerald-500/50 transition-all active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed",
        children: [
          /* @__PURE__ */ jsx(Play, { size: 14, fill: "currentColor" }),
          "Test"
        ]
      }
    ) }),
    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 mr-4", children: [
      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", title: "Help / Documentation", onClick: onHelp, children: /* @__PURE__ */ jsx(CircleQuestionMark, { size: 18 }) }),
      showThemeToggle && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", title: "Toggle Theme", onClick: onToggleTheme, children: isDarkMode ? /* @__PURE__ */ jsx(Sun, { size: 18 }) : /* @__PURE__ */ jsx(Moon, { size: 18 }) }),
      /* @__PURE__ */ jsxs(Button, { variant: "ghost", className: "hidden lg:flex", onClick: onImport, children: [
        /* @__PURE__ */ jsx(Upload, { size: 16 }),
        " Import"
      ] }),
      /* @__PURE__ */ jsxs(
        Button,
        {
          variant: "ghost",
          className: "hidden lg:flex",
          onClick: onExport,
          disabled: !model || !isValid,
          title: !isValid ? "Resolve validation errors to export" : "Export DMN File",
          children: [
            /* @__PURE__ */ jsx(Download, { size: 16 }),
            " Export"
          ]
        }
      )
    ] }),
    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children: /* @__PURE__ */ jsxs(
      Button,
      {
        variant: "primary",
        className: "shadow-emerald-200",
        disabled: !model || !isValid,
        onClick: onSave,
        title: !isValid ? "Resolve validation errors to save" : "Save changes",
        children: [
          /* @__PURE__ */ jsx(Save, { size: 16 }),
          " Save"
        ]
      }
    ) })
  ] })
] });
const Editor = (props) => {
  const [model, setModel] = useState(null);
  const [isTestOpen, setTestOpen] = useState(false);
  const [isHelpOpen, setHelpOpen] = useState(false);
  const [aiSelection, setAiSelection] = useState(
    { columnIds: /* @__PURE__ */ new Set(), ruleIds: /* @__PURE__ */ new Set(), cells: /* @__PURE__ */ new Set() }
  );
  const containerRef = useRef(null);
  useDmnAiCapability(
    model,
    setModel,
    props.onAiCapabilityReady,
    () => containerRef.current,
    (s) => setAiSelection({ columnIds: new Set(s.columnIds), ruleIds: new Set(s.ruleIds), cells: new Set(s.cells) })
  );
  const [internalIsDarkMode, setInternalIsDarkMode] = useState(false);
  const effectiveTheme = props.theme || window.DMN_EDITOR_THEME;
  const isDarkMode = effectiveTheme !== void 0 ? effectiveTheme === "dark" : internalIsDarkMode;
  const fileInputRef = useRef(null);
  const isValid = useMemo(() => {
    if (!model) return true;
    return validateModel(model).isValid;
  }, [model]);
  useEffect(() => {
    try {
      const xmlToLoad = props.initialXml || window.initialXml || INITIAL_DMN_XML;
      const parsed = parseDmnXml(xmlToLoad);
      setModel(parsed);
    } catch (e) {
      console.error("Failed to parse initial DMN XML", e);
    }
  }, [props.initialXml]);
  useEffect(() => {
    if (isDarkMode) {
      document.documentElement.classList.add("dark");
    } else {
      document.documentElement.classList.remove("dark");
    }
  }, [isDarkMode]);
  const handleSave = () => {
    if (!model || !isValid) return;
    const xmlStr = generateDmnXml(model);
    if (props.onSave) {
      props.onSave(xmlStr);
    } else if (window.onDmnSave) {
      window.onDmnSave(xmlStr);
    } else {
      console.log("Model saved internally:", xmlStr);
    }
  };
  const handleExport = () => {
    if (!model || !isValid) return;
    const xmlStr = generateDmnXml(model);
    const blob = new Blob([xmlStr], { type: "text/xml" });
    const url = URL.createObjectURL(blob);
    const downloadAnchorNode = document.createElement("a");
    downloadAnchorNode.setAttribute("href", url);
    downloadAnchorNode.setAttribute("download", `${model.name.replace(/\s+/g, "_")}.dmn`);
    document.body.appendChild(downloadAnchorNode);
    downloadAnchorNode.click();
    downloadAnchorNode.remove();
    URL.revokeObjectURL(url);
  };
  const handleImportClick = () => {
    var _a;
    (_a = fileInputRef.current) == null ? void 0 : _a.click();
  };
  const handleFileChange = (e) => {
    var _a;
    const file = (_a = e.target.files) == null ? void 0 : _a[0];
    if (!file) return;
    const reader = new FileReader();
    reader.onload = (event) => {
      var _a2;
      try {
        const xml = (_a2 = event.target) == null ? void 0 : _a2.result;
        const parsed = parseDmnXml(xml);
        setModel(parsed);
      } catch (err) {
        console.error(err);
        alert("Failed to parse DMN file. Please ensure it is a valid DMN 1.3+ XML.");
      }
    };
    reader.readAsText(file);
    e.target.value = "";
  };
  const toggleTheme = () => {
    if (props.theme === void 0) {
      setInternalIsDarkMode(!internalIsDarkMode);
    }
  };
  if (!model) return /* @__PURE__ */ jsx("div", { className: "h-screen w-full flex items-center justify-center bg-slate-50 dark:bg-slate-950 text-slate-500", children: "Loading Editor..." });
  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col h-screen bg-slate-50 dark:bg-slate-950 font-sans text-slate-900 dark:text-slate-200 transition-colors", children: [
    /* @__PURE__ */ jsx(
      "input",
      {
        type: "file",
        ref: fileInputRef,
        onChange: handleFileChange,
        className: "hidden",
        accept: ".dmn,.xml"
      }
    ),
    /* @__PURE__ */ jsx(
      Header,
      {
        model,
        onImport: handleImportClick,
        onExport: handleExport,
        onSave: handleSave,
        onBack: props.onBack || window.onDmnBack,
        onToggleTheme: toggleTheme,
        isDarkMode,
        onTest: () => setTestOpen(true),
        onHelp: () => setHelpOpen(true),
        showThemeToggle: props.theme === void 0,
        isValid
      }
    ),
    /* @__PURE__ */ jsxs("main", { ref: containerRef, className: "flex-1 flex flex-col relative overflow-hidden", children: [
      /* @__PURE__ */ jsx(
        DecisionTable,
        {
          model,
          onModelChange: setModel,
          selection: aiSelection
        }
      ),
      /* @__PURE__ */ jsxs("div", { className: "h-8 bg-white dark:bg-slate-900 border-t border-slate-200 dark:border-slate-800 flex items-center justify-between px-4 text-xs text-slate-500 dark:text-slate-400 shrink-0 transition-colors", children: [
        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4", children: [
          /* @__PURE__ */ jsxs("span", { children: [
            "Rules: ",
            model.rules.length
          ] }),
          /* @__PURE__ */ jsxs("span", { children: [
            "Columns: ",
            model.columns.length
          ] }),
          /* @__PURE__ */ jsxs("span", { className: "text-emerald-600 dark:text-emerald-500 font-medium", children: [
            model.hitPolicy,
            " Policy"
          ] }),
          !isValid && /* @__PURE__ */ jsxs("span", { className: "text-red-500 font-bold flex items-center gap-1", children: [
            /* @__PURE__ */ jsx(CircleAlert, { size: 12 }),
            " Model contains errors"
          ] })
        ] }),
        /* @__PURE__ */ jsx("div", { children: "Last edited: Just now" })
      ] })
    ] }),
    /* @__PURE__ */ jsx(
      TestModal,
      {
        isOpen: isTestOpen,
        onClose: () => setTestOpen(false),
        model
      }
    ),
    /* @__PURE__ */ jsx(
      HelpModal,
      {
        isOpen: isHelpOpen,
        onClose: () => setHelpOpen(false)
      }
    )
  ] });
};
export {
  Editor as DmnEditor,
  Editor,
  INITIAL_DMN_XML,
  createDmnAiCapability,
  Editor as default,
  generateDmnXml,
  parseDmnXml
};
//# sourceMappingURL=index.js.map
