saasaloy 0.2.0 → 0.3.0

package/templates/base/packages/ui/src/components/sheet.tsx

@@ -0,0 +1,132 @@
+import * as React from "react";
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+
+import { cn } from "@repo/ui/lib/utils";
+import { Button } from "@repo/ui/components/button";
+import { XIcon } from "lucide-react";
+
+function Sheet({ ...props }: SheetPrimitive.Root.Props) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
+}
+
+function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
+}
+
+function SheetClose({ ...props }: SheetPrimitive.Close.Props) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
+}
+
+function SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
+}
+
+function SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {
+  return (
+    <SheetPrimitive.Backdrop
+      data-slot="sheet-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}: SheetPrimitive.Popup.Props & {
+  side?: "top" | "right" | "bottom" | "left";
+  showCloseButton?: boolean;
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Popup
+        data-slot="sheet-content"
+        data-side={side}
+        className={cn(
+          "bg-popover text-popover-foreground fixed z-50 flex flex-col gap-4 bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <SheetPrimitive.Close
+            data-slot="sheet-close"
+            render={
+              <Button
+                variant="ghost"
+                className="absolute top-3 right-3"
+                size="icon-sm"
+              />
+            }
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </SheetPrimitive.Close>
+        )}
+      </SheetPrimitive.Popup>
+    </SheetPortal>
+  );
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-0.5 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground text-base font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: SheetPrimitive.Description.Props) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};

package/templates/base/packages/ui/src/components/table.tsx

@@ -0,0 +1,114 @@
+import * as React from "react";
+
+import { cn } from "@repo/ui/lib/utils";
+
+function Table({ className, ...props }: React.ComponentProps<"table">) {
+  return (
+    <div
+      data-slot="table-container"
+      className="relative w-full overflow-x-auto"
+    >
+      <table
+        data-slot="table"
+        className={cn("w-full caption-bottom text-sm", className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+  return (
+    <thead
+      data-slot="table-header"
+      className={cn("[&_tr]:border-b", className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+  return (
+    <tbody
+      data-slot="table-body"
+      className={cn("[&_tr:last-child]:border-0", className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+  return (
+    <tfoot
+      data-slot="table-footer"
+      className={cn(
+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+  return (
+    <tr
+      data-slot="table-row"
+      className={cn(
+        "hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+  return (
+    <th
+      data-slot="table-head"
+      className={cn(
+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+  return (
+    <td
+      data-slot="table-cell"
+      className={cn(
+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<"caption">) {
+  return (
+    <caption
+      data-slot="table-caption"
+      className={cn("text-muted-foreground mt-4 text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

package/templates/base/packages/ui/src/components/tabs.tsx

@@ -0,0 +1,81 @@
+import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
+import { cva } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
+
+import { cn } from "@repo/ui/lib/utils";
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: TabsPrimitive.Root.Props) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      className={cn(
+        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+const tabsListVariants = cva(
+  "group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
+  return (
+    <TabsPrimitive.Tab
+      data-slot="tabs-trigger"
+      className={cn(
+        "text-foreground/60 hover:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
+        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {
+  return (
+    <TabsPrimitive.Panel
+      data-slot="tabs-content"
+      className={cn("flex-1 text-sm outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/templates/base/packages/ui/src/components/tooltip.tsx

@@ -0,0 +1,64 @@
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+
+import { cn } from "@repo/ui/lib/utils";
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "bg-foreground text-background data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md px-3 py-1.5 text-xs has-data-[slot=kbd]:pr-1.5 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/templates/base/packages/ui/src/lib/sentinel.ts

@@ -1,7 +1,7 @@
 // Canary for the tool repo's `scripts/verify-css` smoke test. Tailwind's class
 // detection is text-based — it scans source files as plain text and never imports them —
 // so this constant needs no consumer to make the utility below reach the built CSS. It
-// reaches it only if globals.css's `@source "../**/*.{ts,tsx}"` glob is actually
+// reaches it only if globals.css's `@source "../lib/**/*.{ts,tsx}"` glob is actually
 // matching packages/ui, which is the exact failure the smoke test exists to catch.
 //
 // The utility is an arbitrary property (`[--saasaloy-css-probe:1]`) so it compiles to a

package/templates/base/packages/ui/src/lib/theme.ts

@@ -10,6 +10,18 @@
 /** localStorage key holding the visitor's explicit choice. `system` clears it. */
 export const THEME_STORAGE_KEY = "theme";
 
+/**
+ * localStorage key marking that the visitor has used a toggle at least once.
+ *
+ * THEME_STORAGE_KEY alone cannot carry that fact, because `system` is spelled as an
+ * absent key — so a first visit and a deliberate `system` read the same. A host that
+ * wants a default other than the OS preference (the admin app starts on dark) needs to
+ * tell those two apart, and this key is the only difference between them.
+ *
+ * `installThemeToggle` writes it on every press. Nothing clears it.
+ */
+export const THEME_CHOICE_KEY = "theme-chosen";
+
 /** Attribute on `<html>` carrying the *chosen* state — also the JS-present marker. */
 export const THEME_ATTRIBUTE = "data-theme";
 
@@ -72,8 +84,119 @@ export function setTheme(theme: Theme): void {
   root.setAttribute(THEME_ATTRIBUTE, theme);
   root.classList.toggle("dark", resolveTheme(theme) === "dark");
 
+  relabelThemeToggles(theme);
+}
+
+/**
+ * Give every `[data-theme-toggle]` in the document the accessible name of the state it is
+ * in. `setTheme` calls this, so a host only needs it directly for the one case `setTheme`
+ * cannot cover: a toggle that MOUNTS AFTER the theme was applied.
+ *
+ * That is the ordinary case in a React host. `theme-toggle.tsx` renders a static
+ * `aria-label` for `system` — the truthful value for a first-time visitor — and the theme
+ * is applied in the entry module, before React has mounted anything. Without this call the
+ * button announces "Theme: system" over a painted dark page until the first press.
+ *
+ * The Astro host gets the same repair from THEME_INIT_SCRIPT's `DOMContentLoaded` handler.
+ *
+ * `data-theme` is author-writable, so an unrecognised value falls back to the stored
+ * choice rather than setting `aria-label="undefined"`.
+ */
+export function relabelThemeToggles(theme?: Theme): void {
+  const root = document.documentElement;
+  const painted = theme ?? root.getAttribute(THEME_ATTRIBUTE);
+  const named =
+    painted !== null && THEME_ORDER.includes(painted as Theme)
+      ? (painted as Theme)
+      : getStoredTheme();
+
   for (const trigger of root.querySelectorAll(`[${THEME_TOGGLE_ATTRIBUTE}]`)) {
-    trigger.setAttribute("aria-label", THEME_LABELS[theme]);
+    trigger.setAttribute("aria-label", THEME_LABELS[named]);
+  }
+}
+
+/**
+ * Install the toggle's click behaviour on `document`, and answer with a function that
+ * removes it again.
+ *
+ * A host that inlines THEME_INIT_SCRIPT already has this and must NOT call it — the two
+ * listeners would both fire and the cycle would advance twice per press. It exists for the
+ * host that cannot inline the script: a Vite SPA's `index.html` substitutes only `%VITE_*%`
+ * values, so it has no way to reach a TypeScript constant. Such an app calls this once from
+ * its entry module instead of pasting a second copy of the cycle rule.
+ *
+ * It cycles from what is PAINTED, not from what is stored, for the reason the shared script
+ * gives: where storage is unwritable the write is a no-op, so reading storage would answer
+ * the same value forever and every press would land on the same theme.
+ */
+export function installThemeToggle(): () => void {
+  function onClick(event: MouseEvent): void {
+    const { target } = event;
+    if (!(target instanceof Element)) {
+      return;
+    }
+    if (!target.closest(`[${THEME_TOGGLE_ATTRIBUTE}]`)) {
+      return;
+    }
+
+    const painted = document.documentElement.getAttribute(THEME_ATTRIBUTE);
+    // An unrecognised `data-theme` gives index -1 and starts the cycle at the head of
+    // THEME_ORDER.
+    const index = painted === null ? -1 : THEME_ORDER.indexOf(painted as Theme);
+    const next = THEME_ORDER[(index + 1) % THEME_ORDER.length] ?? "light";
+
+    setTheme(next);
+
+    // After `setTheme`, and unconditionally: a `system` press CLEARS THEME_STORAGE_KEY, so
+    // this key is the only record that the visitor pressed anything at all.
+    try {
+      localStorage.setItem(THEME_CHOICE_KEY, "1");
+    } catch {
+      // Unwritable storage costs persistence, not the current page.
+    }
+  }
+
+  // The OS half of the same job, and the reason this is not click-only. THEME_INIT_SCRIPT
+  // registers its own matchMedia listener; a host that calls this function instead does
+  // not have that script, so without this listener a visitor on `system` keeps the palette
+  // resolved at load until the next reload.
+  //
+  // It repaints only while the state is `system`. A visitor who picked light or dark said
+  // so deliberately, and the OS must not overrule that.
+  const media = window.matchMedia(OS_DARK_QUERY);
+
+  function onOsChange(): void {
+    if (getStoredTheme() === "system") {
+      setTheme("system");
+    }
+  }
+
+  document.addEventListener("click", onClick);
+  media.addEventListener("change", onOsChange);
+
+  return () => {
+    document.removeEventListener("click", onClick);
+    media.removeEventListener("change", onOsChange);
+  };
+}
+
+/**
+ * Whether the visitor has ever used a toggle in this origin.
+ *
+ * A host whose default is the OS preference never needs this — `getStoredTheme()` already
+ * answers `system` for an unset key. A host with a different default (the admin app starts
+ * on dark) does: without it, a deliberate `system` choice and a first visit are the same
+ * absent key, and the default would overwrite the choice on every load.
+ */
+export function hasChosenTheme(): boolean {
+  try {
+    return (
+      localStorage.getItem(THEME_CHOICE_KEY) !== null ||
+      localStorage.getItem(THEME_STORAGE_KEY) !== null
+    );
+  } catch {
+    // Unreadable storage keeps nothing, so nothing was ever chosen.
+    return false;
   }
 }
 

package/templates/base/packages/ui/src/styles/globals.css

@@ -11,7 +11,34 @@
    `astro dev`/`astro build` run with cwd = apps/web. Without these globs every utility
    class written inside packages/ui is silently dropped — no error, no warning, just
    missing CSS. A non-matching @source glob is equally silent, so both paths matter. */
-@source "../**/*.{ts,tsx}";
+@source "../*.{ts,tsx}";
+@source "../blocks/**/*.{ts,tsx}";
+@source "../containers/**/*.{ts,tsx}";
+@source "../content/**/*.{ts,tsx}";
+@source "../lib/**/*.{ts,tsx}";
+
+/* Components are listed one by one, and that is deliberate. Tailwind scans CONTENT, not
+   imports: a primitive nobody renders still pushes every class string it contains into
+   every stylesheet that pulls this file in. A blanket `../components/**` glob therefore
+   charges the landing page for primitives only an admin screen uses — measured at 71.5 kB
+   against 45.7 kB for the same page with the unused ones out of the scan.
+
+   So this list is the set the landing page and src/blocks/ actually render. Vendor a
+   primitive with `shadcn add` and one of two things is true:
+
+     - a block or an app page renders it → add its line here;
+     - only one app renders it → add an `@source` line in THAT app's own stylesheet
+       instead, the way apps/admin/src/styles/admin.css does for the shell primitives.
+
+   Get this wrong and the failure is the silent one the comment above describes: the class
+   never reaches the CSS and the component renders unstyled. */
+@source "../components/accordion.tsx";
+@source "../components/badge.tsx";
+@source "../components/button.tsx";
+@source "../components/card.tsx";
+@source "../components/input.tsx";
+@source "../components/label.tsx";
+@source "../components/separator.tsx";
 
 /* FOUR levels up, not three. From packages/ui/src/styles/ the path walks
    styles → src → ui → packages → <root>, so `../../../apps/**` would resolve to

package/templates/base/stylelint.config.js

@@ -29,6 +29,14 @@ export default {
     "import-notation": "string",
     "hue-degree-notation": "number",
     "lightness-notation": "number",
+
+    // Stylelint 17.15.0 added `at-rule-prelude-no-invalid`, which checks an at-rule's
+    // prelude against the CSS grammar. Tailwind's `@apply` takes a list of utility
+    // class names, which no grammar describes, so every use in `globals.css` is
+    // reported. Ignore that one at-rule rather than turning the rule off — it still
+    // validates `@media`, `@supports` and the rest.
+    "at-rule-prelude-no-invalid": [true, { ignoreAtRules: ["apply"] }],
+
     "at-rule-no-unknown": [
       true,
       {