@trojanbox-vcp-test/site-edit-engine 0.1.0 → 0.2.0

package/dist/internal/render/tailwind-style-model.js

@@ -1,1187 +0,0 @@
-const RESPONSIVE_BREAKPOINTS = new Set([
-    "sm",
-    "md",
-    "lg",
-    "xl",
-    "2xl",
-]);
-const STATE_VARIANTS = new Set([
-    "hover",
-    "active",
-    "focus",
-    "disabled",
-]);
-const DISPLAY_TOKENS = [
-    "block",
-    "inline-block",
-    "inline",
-    "flex",
-    "inline-flex",
-    "grid",
-    "inline-grid",
-    "hidden",
-];
-const POSITION_TOKENS = [
-    "static",
-    "fixed",
-    "absolute",
-    "relative",
-    "sticky",
-];
-const Z_INDEX_TOKENS = [
-    "z-auto",
-    "z-0",
-    "z-10",
-    "z-20",
-    "z-30",
-    "z-40",
-    "z-50",
-];
-const FLEX_DIRECTION_TOKENS = [
-    "flex-row",
-    "flex-row-reverse",
-    "flex-col",
-    "flex-col-reverse",
-];
-const FLEX_WRAP_TOKENS = [
-    "flex-nowrap",
-    "flex-wrap",
-    "flex-wrap-reverse",
-];
-const FLEX_GROW_TOKENS = ["grow", "grow-0"];
-const FLEX_SHRINK_TOKENS = ["shrink", "shrink-0"];
-const FLEX_BASIS_TOKENS = [
-    "basis-auto",
-    "basis-full",
-    "basis-1/2",
-    "basis-1/3",
-    "basis-2/3",
-    "basis-1/4",
-    "basis-3/4",
-    "basis-px",
-];
-const ORDER_TOKENS = [
-    "order-first",
-    "order-last",
-    "order-none",
-    "order-1",
-    "order-2",
-    "order-3",
-    "order-4",
-    "order-5",
-    "order-6",
-];
-const GRID_TEMPLATE_COLUMNS_TOKENS = [
-    "grid-cols-1",
-    "grid-cols-2",
-    "grid-cols-3",
-    "grid-cols-4",
-    "grid-cols-5",
-    "grid-cols-6",
-    "grid-cols-12",
-    "grid-cols-none",
-    "grid-cols-subgrid",
-];
-const GRID_TEMPLATE_ROWS_TOKENS = [
-    "grid-rows-1",
-    "grid-rows-2",
-    "grid-rows-3",
-    "grid-rows-4",
-    "grid-rows-5",
-    "grid-rows-6",
-    "grid-rows-none",
-    "grid-rows-subgrid",
-];
-const GRID_COLUMN_TOKENS = [
-    "col-auto",
-    "col-span-1",
-    "col-span-2",
-    "col-span-3",
-    "col-span-4",
-    "col-span-6",
-    "col-span-12",
-    "col-span-full",
-];
-const GRID_ROW_TOKENS = [
-    "row-auto",
-    "row-span-1",
-    "row-span-2",
-    "row-span-3",
-    "row-span-4",
-    "row-span-6",
-    "row-span-full",
-];
-const ALIGN_ITEMS_TOKENS = [
-    "items-start",
-    "items-end",
-    "items-center",
-    "items-baseline",
-    "items-stretch",
-];
-const JUSTIFY_CONTENT_TOKENS = [
-    "justify-normal",
-    "justify-start",
-    "justify-end",
-    "justify-center",
-    "justify-between",
-    "justify-around",
-    "justify-evenly",
-    "justify-stretch",
-];
-const OVERFLOW_TOKENS = [
-    "overflow-auto",
-    "overflow-hidden",
-    "overflow-clip",
-    "overflow-visible",
-    "overflow-scroll",
-];
-const FONT_FAMILY_TOKENS = ["font-sans", "font-serif", "font-mono"];
-const FONT_WEIGHT_TOKENS = [
-    "font-thin",
-    "font-extralight",
-    "font-light",
-    "font-normal",
-    "font-medium",
-    "font-semibold",
-    "font-bold",
-    "font-extrabold",
-    "font-black",
-];
-const FONT_SIZE_TOKENS = [
-    "text-xs",
-    "text-sm",
-    "text-base",
-    "text-lg",
-    "text-xl",
-    "text-2xl",
-    "text-3xl",
-    "text-4xl",
-    "text-5xl",
-    "text-6xl",
-    "text-7xl",
-    "text-8xl",
-    "text-9xl",
-];
-const TEXT_ALIGN_TOKENS = [
-    "text-left",
-    "text-center",
-    "text-right",
-    "text-justify",
-    "text-start",
-    "text-end",
-];
-const TEXT_TRANSFORM_TOKENS = [
-    "uppercase",
-    "lowercase",
-    "capitalize",
-    "normal-case",
-];
-const TEXT_DECORATION_TOKENS = [
-    "underline",
-    "overline",
-    "line-through",
-    "no-underline",
-];
-const TEXT_INDENT_TOKENS = [
-    "indent-0",
-    "indent-4",
-    "indent-8",
-    "indent-12",
-];
-const WRITING_MODE_TOKENS = [
-    "[writing-mode:horizontal-tb]",
-    "[writing-mode:vertical-rl]",
-];
-const WHITE_SPACE_TOKENS = [
-    "whitespace-normal",
-    "whitespace-nowrap",
-    "whitespace-pre",
-    "whitespace-pre-line",
-    "whitespace-pre-wrap",
-    "whitespace-break-spaces",
-];
-const WORD_BREAK_TOKENS = [
-    "break-normal",
-    "break-words",
-    "break-all",
-    "break-keep",
-];
-const LINE_CLAMP_TOKENS = [
-    "line-clamp-none",
-    "line-clamp-1",
-    "line-clamp-2",
-    "line-clamp-3",
-    "line-clamp-4",
-    "line-clamp-5",
-    "line-clamp-6",
-];
-const LETTER_SPACING_TOKENS = [
-    "tracking-tighter",
-    "tracking-tight",
-    "tracking-normal",
-    "tracking-wide",
-    "tracking-wider",
-    "tracking-widest",
-];
-const BORDER_STYLE_TOKENS = [
-    "border-solid",
-    "border-dashed",
-    "border-dotted",
-    "border-double",
-    "border-hidden",
-    "border-none",
-];
-const BORDER_WIDTH_TOKENS = [
-    "border",
-    "border-0",
-    "border-2",
-    "border-4",
-    "border-8",
-];
-const OBJECT_FIT_TOKENS = [
-    "object-contain",
-    "object-cover",
-    "object-fill",
-    "object-none",
-    "object-scale-down",
-];
-const ASPECT_RATIO_TOKENS = [
-    "aspect-auto",
-    "aspect-square",
-    "aspect-video",
-];
-const BOX_SHADOW_TOKENS = [
-    "shadow-none",
-    "shadow-sm",
-    "shadow",
-    "shadow-md",
-    "shadow-lg",
-    "shadow-xl",
-    "shadow-2xl",
-];
-const SPACING_VALUE_MAP = {
-    "0": "0",
-    "0px": "0",
-    "1px": "px",
-    "4px": "1",
-    "0.25rem": "1",
-    "8px": "2",
-    "0.5rem": "2",
-    "12px": "3",
-    "0.75rem": "3",
-    "16px": "4",
-    "1rem": "4",
-    "20px": "5",
-    "1.25rem": "5",
-    "24px": "6",
-    "1.5rem": "6",
-    "32px": "8",
-    "2rem": "8",
-    "40px": "10",
-    "2.5rem": "10",
-    "48px": "12",
-    "3rem": "12",
-    "64px": "16",
-    "4rem": "16",
-};
-const FONT_WEIGHT_VALUE_MAP = {
-    "100": "font-thin",
-    "200": "font-extralight",
-    "300": "font-light",
-    "400": "font-normal",
-    normal: "font-normal",
-    "500": "font-medium",
-    "600": "font-semibold",
-    "700": "font-bold",
-    bold: "font-bold",
-    "800": "font-extrabold",
-    "900": "font-black",
-};
-const TEXT_ALIGN_VALUE_MAP = {
-    left: "text-left",
-    center: "text-center",
-    right: "text-right",
-    justify: "text-justify",
-    start: "text-start",
-    end: "text-end",
-};
-const BORDER_RADIUS_VALUE_MAP = {
-    "0": "rounded-none",
-    "0px": "rounded-none",
-    "2px": "rounded-sm",
-    "4px": "rounded",
-    "6px": "rounded-md",
-    "8px": "rounded-lg",
-    "12px": "rounded-xl",
-    "16px": "rounded-2xl",
-    "24px": "rounded-3xl",
-    "9999px": "rounded-full",
-};
-const OPACITY_VALUE_MAP = {
-    "0": "opacity-0",
-    "0%": "opacity-0",
-    "0.05": "opacity-5",
-    "5%": "opacity-5",
-    "0.1": "opacity-10",
-    "10%": "opacity-10",
-    "0.25": "opacity-25",
-    "25%": "opacity-25",
-    "0.5": "opacity-50",
-    "50%": "opacity-50",
-    "0.75": "opacity-75",
-    "75%": "opacity-75",
-    "1": "opacity-100",
-    "100%": "opacity-100",
-};
-const COLOR_VALUE_MAP = {
-    "#111827": "gray-900",
-    "#1f2937": "gray-800",
-    "#374151": "gray-700",
-    "#4b5563": "gray-600",
-    "#6b7280": "gray-500",
-    "#9ca3af": "gray-400",
-    "#d1d5db": "gray-300",
-    "#e5e7eb": "gray-200",
-    "#f3f4f6": "gray-100",
-    "#f9fafb": "gray-50",
-    "#ffffff": "white",
-    white: "white",
-    "#000000": "black",
-    black: "black",
-};
-export const TAILWIND_STYLE_RULES = [
-    {
-        property: "display",
-        exact: DISPLAY_TOKENS,
-        isMatch: (token) => token === "gallery-item",
-        options: [...DISPLAY_TOKENS],
-    },
-    {
-        property: "position",
-        exact: POSITION_TOKENS,
-        isMatch: (token) => token === "cta-shine",
-        options: [...POSITION_TOKENS],
-    },
-    { property: "top", isMatch: (token) => isInsetSideToken("top", token) },
-    {
-        property: "right",
-        isMatch: (token) => isInsetSideToken("right", token),
-    },
-    {
-        property: "bottom",
-        isMatch: (token) => isInsetSideToken("bottom", token),
-    },
-    { property: "left", isMatch: (token) => isInsetSideToken("left", token) },
-    {
-        property: "zIndex",
-        exact: Z_INDEX_TOKENS,
-        isMatch: isZIndexToken,
-        options: [...Z_INDEX_TOKENS],
-    },
-    {
-        property: "flexDirection",
-        exact: FLEX_DIRECTION_TOKENS,
-        options: [...FLEX_DIRECTION_TOKENS],
-    },
-    {
-        property: "flexWrap",
-        exact: FLEX_WRAP_TOKENS,
-        options: [...FLEX_WRAP_TOKENS],
-    },
-    {
-        property: "flexGrow",
-        exact: FLEX_GROW_TOKENS,
-        isMatch: (token) => FLEX_GROW_TOKENS.includes(token) ||
-            /^grow-\[.+\]$/.test(token),
-        options: [...FLEX_GROW_TOKENS],
-    },
-    {
-        property: "flexShrink",
-        exact: FLEX_SHRINK_TOKENS,
-        isMatch: (token) => FLEX_SHRINK_TOKENS.includes(token) ||
-            /^shrink-\[.+\]$/.test(token) ||
-            /^flex-shrink-(?:0|\[.+\])$/.test(token),
-        options: [...FLEX_SHRINK_TOKENS],
-    },
-    {
-        property: "flexBasis",
-        exact: FLEX_BASIS_TOKENS,
-        isMatch: isFlexBasisToken,
-        options: [...FLEX_BASIS_TOKENS],
-    },
-    {
-        property: "flex",
-        isMatch: (token) => /^flex-(?:\d+|auto|initial|none|\[.+\])$/.test(token),
-    },
-    {
-        property: "order",
-        exact: ORDER_TOKENS,
-        isMatch: isOrderToken,
-        options: [...ORDER_TOKENS],
-    },
-    {
-        property: "gridTemplateColumns",
-        exact: GRID_TEMPLATE_COLUMNS_TOKENS,
-        isMatch: isGridTemplateColumnsToken,
-        options: [...GRID_TEMPLATE_COLUMNS_TOKENS],
-    },
-    {
-        property: "gridTemplateRows",
-        exact: GRID_TEMPLATE_ROWS_TOKENS,
-        isMatch: isGridTemplateRowsToken,
-        options: [...GRID_TEMPLATE_ROWS_TOKENS],
-    },
-    {
-        property: "columns",
-        isMatch: (token) => token === "gallery-grid" ||
-            /^columns-(?:\d+|auto|3xs|2xs|xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|\[.+\])$/.test(token),
-    },
-    {
-        property: "gridColumn",
-        exact: GRID_COLUMN_TOKENS,
-        isMatch: isGridColumnToken,
-        options: [...GRID_COLUMN_TOKENS],
-    },
-    {
-        property: "gridRow",
-        exact: GRID_ROW_TOKENS,
-        isMatch: isGridRowToken,
-        options: [...GRID_ROW_TOKENS],
-    },
-    {
-        property: "gap",
-        prefix: "gap-",
-        isMatch: (token) => token.startsWith("gap-") &&
-            !token.startsWith("gap-x-") &&
-            !token.startsWith("gap-y-"),
-    },
-    { property: "gapX", prefix: "gap-x-" },
-    { property: "gapY", prefix: "gap-y-" },
-    { property: "spaceX", prefix: "space-x-" },
-    { property: "spaceY", prefix: "space-y-" },
-    {
-        property: "alignItems",
-        exact: ALIGN_ITEMS_TOKENS,
-        options: [...ALIGN_ITEMS_TOKENS],
-    },
-    {
-        property: "alignSelf",
-        isMatch: (token) => /^self-(?:auto|start|end|center|stretch|baseline)$/.test(token),
-    },
-    {
-        property: "justifyContent",
-        exact: JUSTIFY_CONTENT_TOKENS,
-        options: [...JUSTIFY_CONTENT_TOKENS],
-    },
-    {
-        property: "marginTop",
-        isMatch: (token) => isBoxSideToken("m", "t", token),
-    },
-    {
-        property: "marginRight",
-        isMatch: (token) => isBoxSideToken("m", "r", token),
-    },
-    {
-        property: "marginBottom",
-        isMatch: (token) => isBoxSideToken("m", "b", token),
-    },
-    {
-        property: "marginLeft",
-        isMatch: (token) => isBoxSideToken("m", "l", token),
-    },
-    {
-        property: "paddingTop",
-        isMatch: (token) => isBoxSideToken("p", "t", token),
-    },
-    {
-        property: "paddingRight",
-        isMatch: (token) => isBoxSideToken("p", "r", token),
-    },
-    {
-        property: "paddingBottom",
-        isMatch: (token) => isBoxSideToken("p", "b", token),
-    },
-    {
-        property: "paddingLeft",
-        isMatch: (token) => isBoxSideToken("p", "l", token),
-    },
-    {
-        property: "width",
-        isMatch: (token) => token.startsWith("w-") || isSizeToken(token),
-    },
-    {
-        property: "height",
-        isMatch: (token) => token.startsWith("h-") || isSizeToken(token),
-    },
-    { property: "minWidth", prefix: "min-w-" },
-    { property: "minHeight", prefix: "min-h-" },
-    {
-        property: "maxWidth",
-        isMatch: (token) => token === "container" || token.startsWith("max-w-"),
-    },
-    { property: "maxHeight", prefix: "max-h-" },
-    {
-        property: "overflow",
-        exact: OVERFLOW_TOKENS,
-        isMatch: (token) => /^overflow(?:-[xy])?-.+$/.test(token),
-        options: [...OVERFLOW_TOKENS],
-    },
-    {
-        property: "fontFamily",
-        exact: FONT_FAMILY_TOKENS,
-        isMatch: (token) => FONT_FAMILY_TOKENS.includes(token) ||
-            /^font-\[.+\]$/.test(token) ||
-            (/^font-[a-z][\w-]*$/.test(token) && !isFontWeightToken(token)),
-        options: [...FONT_FAMILY_TOKENS],
-    },
-    {
-        property: "fontSize",
-        exact: FONT_SIZE_TOKENS,
-        isMatch: isFontSizeToken,
-        options: [...FONT_SIZE_TOKENS],
-    },
-    {
-        property: "fontWeight",
-        exact: FONT_WEIGHT_TOKENS,
-        options: [...FONT_WEIGHT_TOKENS],
-    },
-    { property: "lineHeight", prefix: "leading-" },
-    {
-        property: "letterSpacing",
-        exact: LETTER_SPACING_TOKENS,
-        isMatch: (token) => LETTER_SPACING_TOKENS.includes(token) || token.startsWith("tracking-["),
-        options: [...LETTER_SPACING_TOKENS],
-    },
-    {
-        property: "textAlign",
-        exact: TEXT_ALIGN_TOKENS,
-        options: [...TEXT_ALIGN_TOKENS],
-    },
-    {
-        property: "textTransform",
-        exact: TEXT_TRANSFORM_TOKENS,
-        options: [...TEXT_TRANSFORM_TOKENS],
-    },
-    {
-        property: "textDecoration",
-        exact: TEXT_DECORATION_TOKENS,
-        options: [...TEXT_DECORATION_TOKENS],
-    },
-    {
-        property: "textOverflow",
-        exact: ["truncate", "text-ellipsis", "text-clip"],
-    },
-    { property: "fontStyle", exact: ["italic", "not-italic"] },
-    { property: "textUnderlineOffset", prefix: "underline-offset-" },
-    {
-        property: "textIndent",
-        exact: TEXT_INDENT_TOKENS,
-        isMatch: isTextIndentToken,
-        options: [...TEXT_INDENT_TOKENS],
-    },
-    {
-        property: "writingMode",
-        exact: WRITING_MODE_TOKENS,
-        options: [...WRITING_MODE_TOKENS],
-    },
-    {
-        property: "whiteSpace",
-        exact: WHITE_SPACE_TOKENS,
-        options: [...WHITE_SPACE_TOKENS],
-    },
-    {
-        property: "wordBreak",
-        exact: WORD_BREAK_TOKENS,
-        options: [...WORD_BREAK_TOKENS],
-    },
-    {
-        property: "lineClamp",
-        exact: LINE_CLAMP_TOKENS,
-        isMatch: isLineClampToken,
-        options: [...LINE_CLAMP_TOKENS],
-    },
-    {
-        property: "fontVariantNumeric",
-        isMatch: (token) => /^(?:normal-nums|ordinal|slashed-zero|lining-nums|oldstyle-nums|proportional-nums|tabular-nums|diagonal-fractions|stacked-fractions)$/.test(token),
-    },
-    { property: "screenReaderOnly", exact: ["sr-only", "not-sr-only"] },
-    { property: "color", isMatch: isTextColorToken },
-    { property: "backgroundColor", isMatch: isBackgroundColorToken },
-    {
-        property: "backgroundImage",
-        isMatch: (token) => token.startsWith("bg-[url") || token.startsWith("bg-gradient-"),
-    },
-    {
-        property: "borderStyle",
-        exact: BORDER_STYLE_TOKENS,
-        options: [...BORDER_STYLE_TOKENS],
-    },
-    {
-        property: "borderWidth",
-        exact: BORDER_WIDTH_TOKENS,
-        isMatch: isBorderWidthToken,
-        options: [...BORDER_WIDTH_TOKENS],
-    },
-    {
-        property: "divideWidth",
-        isMatch: (token) => /^divide-[xy](?:-\d+|-0|-reverse)?$/.test(token),
-    },
-    { property: "borderRadius", prefix: "rounded" },
-    { property: "borderColor", isMatch: isBorderColorToken },
-    {
-        property: "divideColor",
-        isMatch: (token) => token.startsWith("divide-") &&
-            !/^divide-[xy](?:-\d+|-0|-reverse)?$/.test(token),
-    },
-    {
-        property: "objectFit",
-        exact: OBJECT_FIT_TOKENS,
-        options: [...OBJECT_FIT_TOKENS],
-    },
-    {
-        property: "objectPosition",
-        isMatch: (token) => /^object-(?:bottom|center|left|left-bottom|left-top|right|right-bottom|right-top|top|\[.+\])$/.test(token),
-    },
-    {
-        property: "aspectRatio",
-        exact: ASPECT_RATIO_TOKENS,
-        isMatch: isAspectRatioToken,
-        options: [...ASPECT_RATIO_TOKENS],
-    },
-    { property: "opacity", prefix: "opacity-" },
-    {
-        property: "boxShadow",
-        exact: BOX_SHADOW_TOKENS,
-        isMatch: isBoxShadowToken,
-        options: [...BOX_SHADOW_TOKENS],
-    },
-    { property: "transform", isMatch: isTransformToken },
-    {
-        property: "transformOrigin",
-        isMatch: (token) => /^origin-(?:center|top|top-right|right|bottom-right|bottom|bottom-left|left|top-left|\[.+\])$/.test(token),
-    },
-    {
-        property: "transitionProperty",
-        isMatch: (token) => /^transition(?:-(?:none|all|colors|opacity|shadow|transform|\[.+\]))?$/.test(token) ||
-            [
-                "motion-link",
-                "image-zoom",
-                "card-lift",
-                "cta-shine",
-                "gallery-item-img",
-                "showcase-img",
-            ].includes(token),
-    },
-    {
-        property: "transitionDuration",
-        isMatch: (token) => /^duration-(?:\d+|slow|\[.+\])$/.test(token),
-    },
-    {
-        property: "transitionTimingFunction",
-        isMatch: (token) => /^ease-(?:linear|in|out|in-out|\[.+\])$/.test(token),
-    },
-    {
-        property: "animation",
-        isMatch: (token) => /^(?:animate-.+|fade-.+|slide-in-.+)$/.test(token) ||
-            [
-                "section-reveal",
-                "scroll-reveal",
-                "first-viewport-entrance",
-                "media-reveal",
-                "media-entrance",
-                "gallery-fade-enter",
-                "number-pop",
-            ].includes(token),
-    },
-    {
-        property: "pointerEvents",
-        exact: ["pointer-events-none", "pointer-events-auto"],
-    },
-    {
-        property: "cursor",
-        isMatch: (token) => /^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|\[.+\])$/.test(token),
-    },
-    {
-        property: "userSelect",
-        exact: ["select-none", "select-text", "select-all", "select-auto"],
-    },
-    {
-        property: "outlineStyle",
-        isMatch: (token) => /^outline(?:-(?:none|hidden|solid|dashed|dotted|double|\d+|\[.+\]))?$/.test(token),
-    },
-    {
-        property: "resize",
-        exact: ["resize-none", "resize", "resize-y", "resize-x"],
-    },
-    {
-        property: "ringWidth",
-        isMatch: (token) => /^ring(?:-\d+|-\[.+\]|-inset)?$/.test(token),
-    },
-    {
-        property: "ringColor",
-        isMatch: (token) => token.startsWith("ring-") &&
-            !/^ring(?:-\d+|-\[.+\]|-inset)?$/.test(token),
-    },
-    {
-        property: "backdropFilter",
-        isMatch: (token) => /^backdrop-(?:blur|brightness|contrast|grayscale|hue-rotate|invert|opacity|saturate|sepia)(?:-.+)?$/.test(token),
-    },
-    {
-        property: "overscrollBehavior",
-        isMatch: (token) => /^overscroll(?:-[xy])?-(?:auto|contain|none)$/.test(token),
-    },
-    { property: "scrollMarginTop", prefix: "scroll-mt-" },
-];
-export function buildStyleModel(element) {
-    const source = buildStyleSource(element);
-    return createModel(source.className, source.editable, {
-        sourcePath: source.sourcePath,
-        diagnostics: source.diagnostics,
-        operationBoundary: source.operationBoundary,
-    });
-}
-export function buildStyleSource(element) {
-    const classAttribute = element.attributes?.find((attribute) => attribute.name === "className");
-    if (!classAttribute) {
-        return {
-            kind: "class-name-source",
-            className: "",
-            sourceKind: "missing",
-            editable: true,
-            operationBoundary: ["set-style-property", "set-style-properties"],
-            diagnostics: [
-                {
-                    code: "missing-class-name",
-                    message: "No className attribute is present on this element",
-                },
-            ],
-        };
-    }
-    if (classAttribute.source?.expression) {
-        const expression = classAttribute.source.expression;
-        const resolvedValue = typeof classAttribute.resolvedValue === "string"
-            ? classAttribute.resolvedValue
-            : classAttribute.value !== expression
-                ? classAttribute.value
-                : undefined;
-        if (typeof resolvedValue !== "string") {
-            return {
-                kind: "class-name-source",
-                className: "",
-                sourceKind: "dynamic-expression",
-                editable: false,
-                operationBoundary: [],
-                sourcePath: expression,
-                diagnostics: [
-                    {
-                        code: classAttribute.resolvedValue === undefined
-                            ? "dynamic-binding"
-                            : "non-string-binding",
-                        message: classAttribute.resolvedValue === undefined
-                            ? "Style binding is dynamic and cannot be edited"
-                            : "Style binding must resolve to a static string before it can be edited",
-                    },
-                ],
-            };
-        }
-        return {
-            kind: "class-name-source",
-            className: resolvedValue,
-            sourceKind: "static-expression",
-            editable: true,
-            operationBoundary: ["set-style-property", "set-style-properties"],
-            sourcePath: expression,
-        };
-    }
-    return {
-        kind: "class-name-source",
-        className: classAttribute.value,
-        sourceKind: classAttribute.resolvedValue === undefined
-            ? "static-attribute"
-            : "static-expression",
-        editable: true,
-        operationBoundary: ["set-style-property", "set-style-properties"],
-    };
-}
-export function updateStylePropertyInClassName(currentValue, property, value, context = {}) {
-    const rule = getTailwindStyleRule(property);
-    if (!rule) {
-        return null;
-    }
-    const nextUtility = toTailwindStyleUtility(rule, value);
-    if (value !== null && !nextUtility) {
-        return null;
-    }
-    const nextTokens = splitClassTokens(currentValue).filter((currentToken) => !matchesTailwindStyleRule(rule, getUtilityToken(currentToken)) ||
-        !matchesTailwindStyleContext(currentToken, context));
-    if (nextUtility) {
-        nextTokens.push(formatTailwindStyleContextToken(nextUtility, context));
-    }
-    return dedupeTokens(nextTokens).join(" ");
-}
-export function matchesStyleProperty(property, token) {
-    const rule = getTailwindStyleRule(property);
-    return Boolean(rule && matchesTailwindStyleRule(rule, getUtilityToken(token)));
-}
-function createModel(className, editable, overrides = {}) {
-    const tokens = splitClassTokens(className);
-    const properties = TAILWIND_STYLE_RULES.flatMap((rule) => {
-        const matchedTokens = tokens
-            .map((token) => parseTailwindStyleToken(token))
-            .filter((token) => token !== null && matchesTailwindStyleRule(rule, token.utility));
-        const effectiveTokens = matchedTokens.filter((token, index) => {
-            const context = token.variants.join(":");
-            return (matchedTokens.findLastIndex((candidate) => candidate.variants.join(":") === context) === index);
-        });
-        const baseView = createPropertyView(rule, editable);
-        if (effectiveTokens.length === 0) {
-            return [baseView];
-        }
-        const hasBaseToken = effectiveTokens.some((token) => !token.breakpoint && !token.state);
-        return [
-            ...(hasBaseToken ? [] : [baseView]),
-            ...effectiveTokens.map((token) => createPropertyView(rule, editable, token)),
-        ];
-    });
-    return {
-        kind: "css-style-model",
-        editable,
-        operationBoundary: editable
-            ? ["set-style-property", "set-style-properties"]
-            : [],
-        properties,
-        ...overrides,
-    };
-}
-function createPropertyView(rule, editable, token) {
-    return {
-        property: rule.property,
-        value: token?.raw ?? null,
-        editable,
-        operationBoundary: editable ? ["set-style-property"] : [],
-        ...(token
-            ? {
-                resolvedValue: token.raw,
-                ...(token.breakpoint ? { breakpoint: token.breakpoint } : {}),
-                ...(token.state ? { state: token.state } : {}),
-                ...(token.variants.length ? { variants: token.variants } : {}),
-            }
-            : {}),
-        ...(rule.options ? { options: rule.options } : {}),
-    };
-}
-function getTailwindStyleRule(property) {
-    return TAILWIND_STYLE_RULES.find((rule) => rule.property === property);
-}
-function toTailwindStyleUtility(rule, value) {
-    if (value === null) {
-        return null;
-    }
-    if (typeof value !== "string" &&
-        typeof value !== "number" &&
-        typeof value !== "boolean") {
-        return null;
-    }
-    const rawValue = String(value).trim();
-    if (!rawValue) {
-        return null;
-    }
-    const utility = parseTailwindStyleToken(rawValue)?.utility ?? rawValue;
-    if (matchesTailwindStyleRule(rule, utility)) {
-        return utility;
-    }
-    const mapped = mapCssValueToTailwindUtility(rule, rawValue);
-    if (mapped && matchesTailwindStyleRule(rule, mapped)) {
-        return mapped;
-    }
-    return null;
-}
-function mapCssValueToTailwindUtility(rule, rawValue) {
-    const normalized = rawValue.toLowerCase();
-    switch (rule.property) {
-        case "fontWeight":
-            return FONT_WEIGHT_VALUE_MAP[normalized] ?? null;
-        case "textAlign":
-            return TEXT_ALIGN_VALUE_MAP[normalized] ?? null;
-        case "borderRadius":
-            return BORDER_RADIUS_VALUE_MAP[normalized] ?? null;
-        case "opacity":
-            return OPACITY_VALUE_MAP[normalized] ?? null;
-        case "color":
-            return COLOR_VALUE_MAP[normalized]
-                ? `text-${COLOR_VALUE_MAP[normalized]}`
-                : null;
-        case "backgroundColor":
-            return COLOR_VALUE_MAP[normalized]
-                ? `bg-${COLOR_VALUE_MAP[normalized]}`
-                : null;
-        case "borderColor":
-            return COLOR_VALUE_MAP[normalized]
-                ? `border-${COLOR_VALUE_MAP[normalized]}`
-                : null;
-        default:
-            break;
-    }
-    if (rule.prefix) {
-        const scale = SPACING_VALUE_MAP[normalized];
-        return scale ? `${rule.prefix}${scale}` : null;
-    }
-    return null;
-}
-function matchesTailwindStyleRule(rule, rawToken) {
-    const token = getUtilityToken(rawToken);
-    if (!token) {
-        return false;
-    }
-    if (!hasCleanTailwindUtilitySyntax(token)) {
-        return false;
-    }
-    if (rule.isMatch?.(token)) {
-        return true;
-    }
-    if (rule.exact?.includes(token)) {
-        return true;
-    }
-    if (rule.prefix) {
-        return (isPrefixUtilityBaseToken(rule.prefix, token) ||
-            token.startsWith(rule.prefix));
-    }
-    return false;
-}
-function getUtilityToken(rawToken) {
-    return parseTailwindStyleToken(rawToken)?.utility ?? rawToken.trim();
-}
-function parseTailwindStyleToken(rawToken) {
-    const segments = splitTailwindTokenSegments(rawToken);
-    const utility = segments[segments.length - 1];
-    if (!utility) {
-        return null;
-    }
-    const variants = segments.slice(0, -1);
-    const breakpoint = variants.find((variant) => RESPONSIVE_BREAKPOINTS.has(variant));
-    const state = variants.find((variant) => STATE_VARIANTS.has(variant));
-    return {
-        raw: rawToken.trim(),
-        utility,
-        ...(breakpoint ? { breakpoint } : {}),
-        ...(state ? { state } : {}),
-        variants,
-    };
-}
-function matchesTailwindStyleContext(rawToken, context) {
-    const parsed = parseTailwindStyleToken(rawToken);
-    if (!parsed) {
-        return false;
-    }
-    return ((context.breakpoint ?? undefined) === parsed.breakpoint &&
-        (context.state ?? undefined) === parsed.state);
-}
-function formatTailwindStyleContextToken(token, context) {
-    const utility = parseTailwindStyleToken(token)?.utility ?? token.trim();
-    const variants = [context.breakpoint, context.state].filter((variant) => Boolean(variant));
-    return variants.length ? `${variants.join(":")}:${utility}` : utility;
-}
-function splitTailwindTokenSegments(rawToken) {
-    const segments = [];
-    let current = "";
-    let bracketDepth = 0;
-    for (const character of rawToken.trim()) {
-        if (character === "[") {
-            bracketDepth += 1;
-            current += character;
-            continue;
-        }
-        if (character === "]") {
-            bracketDepth = Math.max(0, bracketDepth - 1);
-            current += character;
-            continue;
-        }
-        if (character === ":" && bracketDepth === 0) {
-            if (current) {
-                segments.push(current);
-            }
-            current = "";
-            continue;
-        }
-        current += character;
-    }
-    if (current) {
-        segments.push(current);
-    }
-    return segments;
-}
-function splitClassTokens(value) {
-    return value
-        .split(/\s+/)
-        .map((token) => token.trim())
-        .filter(Boolean);
-}
-function dedupeTokens(tokens) {
-    const seen = new Set();
-    const next = [];
-    for (const token of tokens) {
-        if (!token || seen.has(token)) {
-            continue;
-        }
-        seen.add(token);
-        next.push(token);
-    }
-    return next;
-}
-function isFontSizeToken(token) {
-    return (FONT_SIZE_TOKENS.includes(token) ||
-        (/^text-\[.+\]$/.test(token) && !looksLikeColorValue(token.slice(6, -1))));
-}
-function isTextColorToken(token) {
-    if (!token.startsWith("text-") ||
-        TEXT_ALIGN_TOKENS.includes(token)) {
-        return false;
-    }
-    return !isFontSizeToken(token);
-}
-function isBackgroundColorToken(token) {
-    if (!token.startsWith("bg-")) {
-        return false;
-    }
-    return !(token.startsWith("bg-gradient-") ||
-        token.startsWith("bg-[url") ||
-        [
-            "bg-fixed",
-            "bg-local",
-            "bg-scroll",
-            "bg-clip-border",
-            "bg-clip-padding",
-            "bg-clip-content",
-            "bg-clip-text",
-            "bg-origin-border",
-            "bg-origin-padding",
-            "bg-origin-content",
-        ].includes(token));
-}
-function isBorderWidthToken(token) {
-    return (BORDER_WIDTH_TOKENS.includes(token) ||
-        /^border-\[.+\]$/.test(token) ||
-        /^border-(?:x|y|t|r|b|l)(?:-\d+|-\[.+\])?$/.test(token));
-}
-function isInsetSideToken(side, token) {
-    const sideAxis = side === "top" || side === "bottom"
-        ? "y"
-        : side === "right" || side === "left"
-            ? "x"
-            : "";
-    return (new RegExp(`^-?${side}-.+$`).test(token) ||
-        new RegExp(`^-?inset-${sideAxis}-.+$`).test(token) ||
-        /^-?inset-.+$/.test(token));
-}
-function isFlexBasisToken(token) {
-    return (FLEX_BASIS_TOKENS.includes(token) ||
-        /^basis-\[.+\]$/.test(token));
-}
-function isOrderToken(token) {
-    return (ORDER_TOKENS.includes(token) ||
-        /^-?order-(?:\d+|\[.+\])$/.test(token));
-}
-function isGridTemplateColumnsToken(token) {
-    return (GRID_TEMPLATE_COLUMNS_TOKENS.includes(token) || /^grid-cols-\[.+\]$/.test(token));
-}
-function isGridTemplateRowsToken(token) {
-    return (GRID_TEMPLATE_ROWS_TOKENS.includes(token) || /^grid-rows-\[.+\]$/.test(token));
-}
-function isGridColumnToken(token) {
-    return (GRID_COLUMN_TOKENS.includes(token) ||
-        /^(?:col|col-span|col-start|col-end)-.+$/.test(token));
-}
-function isGridRowToken(token) {
-    return (GRID_ROW_TOKENS.includes(token) ||
-        /^(?:row|row-span|row-start|row-end)-.+$/.test(token));
-}
-function isZIndexToken(token) {
-    return (Z_INDEX_TOKENS.includes(token) ||
-        /^-?z-(?:\d+|\[.+\])$/.test(token));
-}
-function isBorderColorToken(token) {
-    if (!token.startsWith("border-")) {
-        return false;
-    }
-    return !(BORDER_STYLE_TOKENS.includes(token) ||
-        isBorderWidthToken(token) ||
-        token.startsWith("border-spacing-") ||
-        /^border-(?:x|y|t|r|b|l)(?:-|$)/.test(token));
-}
-function isLineClampToken(token) {
-    return (LINE_CLAMP_TOKENS.includes(token) ||
-        /^line-clamp-\[.+\]$/.test(token));
-}
-function isTextIndentToken(token) {
-    return (TEXT_INDENT_TOKENS.includes(token) ||
-        /^-?indent-\[.+\]$/.test(token));
-}
-function isAspectRatioToken(token) {
-    return (ASPECT_RATIO_TOKENS.includes(token) || /^aspect-\[.+\]$/.test(token));
-}
-function isBoxShadowToken(token) {
-    return (BOX_SHADOW_TOKENS.includes(token) ||
-        /^shadow-(?:\[.+\]|[a-z][\w-]*)$/.test(token));
-}
-function isFontWeightToken(token) {
-    return FONT_WEIGHT_TOKENS.includes(token);
-}
-function isBoxSideToken(prefix, side, token) {
-    const axis = side === "t" || side === "b" ? "y" : "x";
-    return (new RegExp(`^-?${prefix}${side}-.+$`).test(token) ||
-        new RegExp(`^-?${prefix}${axis}-.+$`).test(token) ||
-        new RegExp(`^-?${prefix}-.+$`).test(token));
-}
-function isSizeToken(token) {
-    return /^size-.+$/.test(token);
-}
-function isPrefixUtilityBaseToken(prefix, token) {
-    return token === prefix.replace(/-$/, "");
-}
-function hasCleanTailwindUtilitySyntax(token) {
-    if (!token) {
-        return false;
-    }
-    let bracketDepth = 0;
-    for (const character of token) {
-        if (character === "[") {
-            bracketDepth += 1;
-            continue;
-        }
-        if (character === "]") {
-            bracketDepth -= 1;
-            if (bracketDepth < 0) {
-                return false;
-            }
-            continue;
-        }
-        if (bracketDepth === 0 &&
-            (character === "," ||
-                character === '"' ||
-                character === "'" ||
-                character === "\\")) {
-            return false;
-        }
-    }
-    return bracketDepth === 0;
-}
-function isTransformToken(token) {
-    return (token === "transform" ||
-        token === "transform-gpu" ||
-        token === "transform-none" ||
-        token.startsWith("translate-") ||
-        token.startsWith("-translate-") ||
-        token.startsWith("scale-") ||
-        token.startsWith("-scale-") ||
-        token.startsWith("rotate-") ||
-        token.startsWith("-rotate-") ||
-        token.startsWith("skew-") ||
-        token.startsWith("-skew-"));
-}
-function looksLikeColorValue(value) {
-    return (value.startsWith("#") ||
-        value.startsWith("rgb") ||
-        value.startsWith("hsl") ||
-        value.startsWith("oklch") ||
-        value.startsWith("color("));
-}