feat: add element component

Ref #3632

Here unflagged element component in components panel and html paste.

Additionally

- migrate link template to html element
- added :local-link state to links which is replaced with
  [aria-current=page] when css is generated, sadly not yet supported in
  any browser
- migrated many templates from legacy components to html elements
- put tailwind paste behind flag

Author: TrySound

apps/builder/app/builder/features/command-panel/command-panel.tsx

@@ -24,7 +24,6 @@ import {
   componentCategories,
   collectionComponent,
   parseComponentName,
-  elementComponent,
 } from "@webstudio-is/sdk";
 import type { Breakpoint, Page } from "@webstudio-is/sdk";
 import type { TemplateMeta } from "@webstudio-is/template";
@@ -165,9 +164,6 @@ const $componentOptions = computed(
       ) {
         continue;
       }
-      if (isFeatureEnabled("element") === false && name === elementComponent) {
-        continue;
-      }
 
       const componentMeta = metas.get(name);
       const label =

apps/builder/app/builder/features/components/components.tsx

@@ -101,9 +101,6 @@ const $metas = computed(
       ) {
         continue;
       }
-      if (isFeatureEnabled("element") === false && name === elementComponent) {
-        continue;
-      }
 
       availableComponents.add(name);
       metas.push({

apps/builder/app/builder/shared/commands.ts

@@ -6,6 +6,7 @@ import {
 } from "@webstudio-is/sdk";
 import type { Instance } from "@webstudio-is/sdk";
 import { toast } from "@webstudio-is/design-system";
+import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 import { createCommandsEmitter, type Command } from "~/shared/commands-emitter";
 import {
   $editingItemSelector,
@@ -528,15 +529,19 @@ export const { emitCommand, subscribeCommands } = createCommandsEmitter({
       handler: () => unwrap(),
     },
 
-    {
-      name: "pasteHtmlWithTailwindClasses",
-      handler: async () => {
-        const html = await navigator.clipboard.readText();
-        let fragment = generateFragmentFromHtml(html);
-        fragment = await generateFragmentFromTailwind(fragment);
-        return insertWebstudioFragmentAt(fragment);
-      },
-    },
+    ...(isFeatureEnabled("tailwind")
+      ? [
+          {
+            name: "pasteHtmlWithTailwindClasses",
+            handler: async () => {
+              const html = await navigator.clipboard.readText();
+              let fragment = generateFragmentFromHtml(html);
+              fragment = await generateFragmentFromTailwind(fragment);
+              return insertWebstudioFragmentAt(fragment);
+            },
+          },
+        ]
+      : []),
 
     // history
 

apps/builder/app/shared/copy-paste/plugin-html.ts

@@ -1,14 +1,10 @@
-import { isFeatureEnabled } from "@webstudio-is/feature-flags";
 import { generateFragmentFromHtml } from "../html";
 import { insertWebstudioFragmentAt } from "../instance-utils";
 import type { Plugin } from "./init-copy-paste";
 
 export const html: Plugin = {
   mimeType: "text/plain",
   onPaste: (html: string) => {
-    if (!isFeatureEnabled("element")) {
-      return false;
-    }
     const fragment = generateFragmentFromHtml(html);
     return insertWebstudioFragmentAt(fragment);
   },

packages/css-engine/src/core/atomic.test.ts

@@ -279,3 +279,23 @@ test("generate merged properties as single rule", () => {
 }"
 `);
 });
+
+test("convert :local-link to [aria-current=page] selector", () => {
+  const sheet = createRegularStyleSheet();
+  const rule = sheet.addNestingRule(".instance");
+  sheet.addMediaRule("x");
+  rule.setDeclaration({
+    breakpoint: "x",
+    selector: ":local-link",
+    property: "color",
+    value: { type: "keyword", value: "green" },
+  });
+  expect(generateAtomic(sheet, { getKey: () => "" }).cssText)
+    .toMatchInlineSnapshot(`
+    "@media all {
+      .c3mubaz[aria-current=page] {
+        color: green
+      }
+    }"
+  `);
+});

packages/css-engine/src/core/rules.ts

@@ -258,7 +258,11 @@ export class NestingRule {
       if (declaration.breakpoint !== breakpoint) {
         continue;
       }
-      const { selector: nestedSelector } = declaration;
+      let nestedSelector = declaration.selector;
+      // polyfill :local-link with framework specific logic
+      if (nestedSelector === ":local-link") {
+        nestedSelector = "[aria-current=page]";
+      }
       const selector = this.#selector + this.#descendantSuffix + nestedSelector;
       let style = styleBySelector.get(selector);
       if (style === undefined) {

packages/css-engine/src/core/style-sheet-regular.test.ts

@@ -765,3 +765,19 @@ test("generate merged properties as single rule", () => {
 }"
 `);
 });
+
+test("convert :local-link to [aria-current=page] selector", () => {
+  const sheet = createRegularStyleSheet();
+  const rule = sheet.addNestingRule(".instance");
+  rule.setDeclaration({
+    breakpoint: "base",
+    selector: ":local-link",
+    property: "color",
+    value: { type: "keyword", value: "green" },
+  });
+  expect(rule.toString({ breakpoint: "base" })).toMatchInlineSnapshot(`
+    ".instance[aria-current=page] {
+      color: green
+    }"
+  `);
+});

packages/feature-flags/src/flags.ts

@@ -5,4 +5,4 @@ export const aiRadixComponents = false;
 export const animation = false;
 export const videoAnimation = false;
 export const resourceProp = false;
-export const element = false;
+export const tailwind = false;

packages/html-data/src/pseudo-classes.ts

@@ -4,7 +4,7 @@ const location = [
   // ':link',
   ":visited",
   // ':any-link',
-  // ':local-link',
+  ":local-link",
   // ':target',
   // ':target-within',
 ];

packages/sdk-components-react/src/box.ws.ts

@@ -14,9 +14,6 @@ import {
 import { props } from "./__generated__/box.props";
 
 export const meta: WsComponentMeta = {
-  category: "general",
-  description:
-    "A container for content. By default this is a Div, but the tag can be changed in settings.",
   presetStyle: {
     div,
     address,
@@ -29,7 +26,6 @@ export const meta: WsComponentMeta = {
     nav,
     section,
   },
-  order: 0,
   initialProps: ["tag", "id", "class"],
   props: {
     ...props,