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

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

@@ -0,0 +1,1187 @@
+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("));
+}