mlola-ui 1.5.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mlola-ui",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "mcpName": "io.github.mlolahq/mlola-ui",
   "description": "Source-copy CLI that writes framework-free Mlola UI items into your project",
   "type": "module",

package/registry/catalog.json

@@ -111,7 +111,9 @@
     "docs-site",
     "finance",
     "smart-home",
-    "islamic-finance"
+    "incident-room",
+    "voice-console",
+    "trip-planner"
   ],
   "items": [
     {
@@ -1525,19 +1527,50 @@
       ]
     },
     {
-      "name": "islamic-finance",
+      "name": "incident-room",
       "type": "registry:template",
-      "title": "Islamic Finance",
-      "description": "Sharia finance for a household: zakat reckoned on what is held a lunar year against the nisab in gold or silver and given to the eight who may receive it, dates on the Hijri calendar, sadaqah and waqf endowments, sukuk that pay a share of what their assets earn, and a home bought by murabahah at a price agreed once",
+      "title": "Incident Room",
+      "description": "An incident room for a team on call: what has failed and what is left of the error budget, an assistant that has read the logs, traces and releases and asks before rolling back, a timeline to post to, the release that caused it, responders to page, requests traced call by call, a live log tail and the public status page",
       "category": "application",
       "tags": [
         "template",
-        "finance",
-        "islamic-finance",
-        "zakat",
-        "sukuk",
-        "waqf",
-        "murabahah",
+        "incident",
+        "on-call",
+        "observability",
+        "status-page",
+        "ai",
+        "premium"
+      ]
+    },
+    {
+      "name": "voice-console",
+      "type": "registry:template",
+      "title": "Voice Agent Console",
+      "description": "A console for a voice agent answering a clinic's phone line: the live call with the agent's presence, both voices, the transcript as it is spoken and the tools it uses, a handoff that waits for a person, taking over with the agent's suggested lines, whispers the caller does not hear, the day's calls to replay and review, the day in numbers, and the agent's voice, greeting, tools and rules",
+      "category": "application",
+      "tags": [
+        "template",
+        "voice",
+        "ai",
+        "agent",
+        "call-center",
+        "transcript",
+        "premium"
+      ]
+    },
+    {
+      "name": "trip-planner",
+      "type": "registry:template",
+      "title": "Trip Planner",
+      "description": "A trip planner: the days as a board to drag places between, each day's times worked out and what is wrong with it (an outdoor stop in the forecast rain, a place closed that day) with a better day to move it to, places drawn as postcards, the budget with what is paid and what the plan still costs, and a packing list the forecast adds to",
+      "category": "application",
+      "tags": [
+        "template",
+        "travel",
+        "itinerary",
+        "kanban",
+        "budget",
+        "planner",
         "premium"
       ]
     }

package/registry/icons.json

@@ -1,6 +1,7 @@
 {
   "version": 1,
   "names": [
+    "Activity",
     "Archive",
     "ArrowDown",
     "ArrowLeft",
@@ -8,6 +9,7 @@
     "ArrowUp",
     "ArrowUpDown",
     "ArrowUpRight",
+    "AudioWaveform",
     "Ban",
     "BarChart",
     "Bath",
@@ -36,6 +38,7 @@
     "Clipboard",
     "Clock",
     "Cloud",
+    "CloudRain",
     "Code2",
     "Coins",
     "CookingPot",
@@ -51,7 +54,9 @@
     "Filter",
     "Flag",
     "Globe",
+    "Headset",
     "Heart",
+    "History",
     "Home",
     "Hourglass",
     "IconArchive",
@@ -73,6 +78,7 @@
     "IconBookmark",
     "IconBox3D",
     "IconBrain",
+    "IconBroadcast",
     "IconCalendar",
     "IconCar",
     "IconCertificate",
@@ -94,6 +100,7 @@
     "IconClipboard",
     "IconClock",
     "IconCloud",
+    "IconCloudRain",
     "IconCode",
     "IconCodeBlock",
     "IconCoins",
@@ -111,6 +118,7 @@
     "IconExternalLink",
     "IconEye",
     "IconEyeOff",
+    "IconFerry",
     "IconFile",
     "IconFilePlus",
     "IconFilter",
@@ -126,9 +134,12 @@
     "IconGoldBar",
     "IconGrip",
     "IconHand",
+    "IconHangUp",
     "IconHeading",
+    "IconHeadset",
     "IconHeart",
     "IconHelp",
+    "IconHistory",
     "IconHome",
     "IconHourglass",
     "IconImage",
@@ -136,6 +147,7 @@
     "IconInfo",
     "IconItalic",
     "IconKey",
+    "IconLandmark",
     "IconLayers",
     "IconLayoutGrid",
     "IconLayoutList",
@@ -147,6 +159,7 @@
     "IconLock",
     "IconLogIn",
     "IconLogOut",
+    "IconLogs",
     "IconMail",
     "IconMapPin",
     "IconMaximize",
@@ -174,17 +187,22 @@
     "IconPlus",
     "IconPointer",
     "IconPrinter",
+    "IconPulse",
     "IconQuote",
     "IconReceipt",
     "IconRedo",
     "IconRefresh",
+    "IconRoute",
     "IconScale",
     "IconSearch",
     "IconSend",
+    "IconServer",
     "IconSettings",
     "IconShare",
     "IconShield",
+    "IconShoppingBag",
     "IconShoppingCart",
+    "IconSiren",
     "IconSliders",
     "IconSmartphone",
     "IconSofa",
@@ -196,6 +214,7 @@
     "IconStickyNote",
     "IconStop",
     "IconStrikethrough",
+    "IconSuitcase",
     "IconSun",
     "IconTag",
     "IconTarget",
@@ -205,6 +224,7 @@
     "IconThumbDown",
     "IconThumbUp",
     "IconTool",
+    "IconTrace",
     "IconTrash",
     "IconTrendingUp",
     "IconTriangleAlert",
@@ -217,6 +237,7 @@
     "IconVolume",
     "IconWallet",
     "IconWasher",
+    "IconWaveform",
     "IconWind",
     "IconWindow",
     "IconWorkflow",
@@ -227,6 +248,7 @@
     "Inbox",
     "Info",
     "Key",
+    "Landmark",
     "Layers",
     "LayoutGrid",
     "LayoutList",
@@ -235,6 +257,8 @@
     "Loader2",
     "LogIn",
     "LogOut",
+    "Logs",
+    "Luggage",
     "Mail",
     "MapPin",
     "Menu",
@@ -253,13 +277,19 @@
     "Plug",
     "Plus",
     "Printer",
+    "Radio",
     "Receipt",
     "Refrigerator",
+    "Route",
     "Scale",
     "Search",
     "Send",
+    "Server",
     "Settings",
+    "Ship",
+    "ShoppingBag",
     "ShoppingCart",
+    "Siren",
     "Smartphone",
     "Sofa",
     "Sparkles",

package/registry/index.json

@@ -2,7 +2,7 @@
   "$schema": "./schema/registry-index.schema.json",
   "schemaVersion": 2,
   "name": "mlola-ui",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "homepage": "https://ui.mlola.com",
   "themeContract": {
     "attribute": "data-theme",
@@ -178,8 +178,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.5.0",
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/behavior": "^1.6.0",
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [
         {
@@ -240,7 +240,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [
         {
@@ -402,7 +402,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [
         {
@@ -494,7 +494,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [],
       "variants": [],
@@ -547,7 +547,7 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/motion": "^1.5.0"
+        "@mlola-ui/motion": "^1.6.0"
       },
       "options": [
         {
@@ -715,8 +715,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.5.0",
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/behavior": "^1.6.0",
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [
         {
@@ -785,7 +785,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [],
       "variants": [],
@@ -840,7 +840,7 @@
         "modal"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [],
       "variants": [],
@@ -904,8 +904,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.5.0",
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/behavior": "^1.6.0",
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [
         {
@@ -994,7 +994,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [],
       "variants": [],
@@ -1219,8 +1219,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.5.0",
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/behavior": "^1.6.0",
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [
         {
@@ -1371,7 +1371,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [],
       "variants": [],
@@ -1422,7 +1422,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.5.0"
+        "@mlola-ui/behavior": "^1.6.0"
       },
       "options": [
         {
@@ -1800,7 +1800,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.5.0"
+        "@mlola-ui/behavior": "^1.6.0"
       },
       "options": [],
       "variants": [],
@@ -1853,8 +1853,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.5.0",
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/behavior": "^1.6.0",
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [
         {
@@ -1932,8 +1932,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.5.0",
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/behavior": "^1.6.0",
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [
         {
@@ -2079,7 +2079,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.5.0"
+        "@mlola-ui/behavior": "^1.6.0"
       },
       "options": [
         {
@@ -2108,7 +2108,7 @@
           "path": "packages/components/slider/slider.tsx",
           "target": "{{aliases.components}}/slider.tsx",
           "type": "registry:ui",
-          "integrity": "sha256-o37Xi4J8+d/fhWFf2LdpPluuKDVXECNl4quKTlrqCU4="
+          "integrity": "sha256-u0CIgpYSseu6yGQZQjjWvoFup9OC/ZJbeKUMlQ1yf8c="
         }
       ],
       "themeContract": {
@@ -2147,7 +2147,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.5.0"
+        "@mlola-ui/behavior": "^1.6.0"
       },
       "options": [
         {
@@ -2307,7 +2307,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.5.0"
+        "@mlola-ui/behavior": "^1.6.0"
       },
       "options": [
         {
@@ -2439,7 +2439,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [
         {
@@ -2527,8 +2527,8 @@
         "spinner"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.5.0",
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/behavior": "^1.6.0",
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [
         {
@@ -2683,7 +2683,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.5.0"
+        "@mlola-ui/behavior": "^1.6.0"
       },
       "options": [
         {
@@ -2760,7 +2760,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.5.0"
+        "@mlola-ui/behavior": "^1.6.0"
       },
       "options": [
         {
@@ -2842,7 +2842,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [
         {
@@ -2914,7 +2914,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [
         {
@@ -2984,7 +2984,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [],
       "variants": [],
@@ -3182,8 +3182,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.5.0",
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/behavior": "^1.6.0",
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [
         {
@@ -3272,7 +3272,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [],
       "variants": [],
@@ -3327,7 +3327,7 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [],
       "variants": [],
@@ -3390,7 +3390,7 @@
         "popover"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [
         {
@@ -3461,7 +3461,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [
         {
@@ -3580,8 +3580,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.5.0",
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/behavior": "^1.6.0",
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [],
       "variants": [],
@@ -3645,7 +3645,7 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.5.0"
+        "@mlola-ui/behavior": "^1.6.0"
       },
       "options": [
         {
@@ -3732,8 +3732,8 @@
       },
       "registryDependencies": [],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.5.0",
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/behavior": "^1.6.0",
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [],
       "variants": [],
@@ -3807,7 +3807,7 @@
         "sheet"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [],
       "variants": [],
@@ -3930,7 +3930,7 @@
         "button"
       ],
       "engineDependencies": {
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [
         {
@@ -4034,8 +4034,8 @@
         "input"
       ],
       "engineDependencies": {
-        "@mlola-ui/behavior": "^1.5.0",
-        "@mlola-ui/icons": "^1.5.0"
+        "@mlola-ui/behavior": "^1.6.0",
+        "@mlola-ui/icons": "^1.6.0"
       },
       "options": [
         {

package/registry/source/packages/components/slider/slider.tsx

@@ -15,11 +15,13 @@ interface SliderProps extends Omit<FormControlProps, "required"> {
   step?: number;
   label?: React.ReactNode;
   showValue?: boolean;
+  /** How the value reads, shown with `showValue` and announced: "1.05×", "0:12 of 0:52". */
+  formatValue?: (value: number) => string;
   size?: SliderSize;
   className?: string;
 }
 const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
-  ({ value, defaultValue = 50, onValueChange, min = 0, max = 100, step = 1, disabled = false, label, showValue = false, size = "md", className, id, name, form, "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": describedBy }, ref) => {
+  ({ value, defaultValue = 50, onValueChange, min = 0, max = 100, step = 1, disabled = false, label, showValue = false, formatValue, size = "md", className, id, name, form, "aria-label": ariaLabel, "aria-labelledby": labelledBy, "aria-describedby": describedBy }, ref) => {
     const low = Number.isFinite(min) ? min : 0;
     const high = Number.isFinite(max) && max > low ? max : low + 100;
     const increment = Number.isFinite(step) && step > 0 ? step : 1;
@@ -47,7 +49,7 @@ const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
         {label || showValue ? (
           <div className="ml-slider-header">
             {label ? <span id={labelId} className="ml-slider-label">{label}</span> : <span />}
-            {showValue ? <output id={valueId} htmlFor={sliderId} className="ml-slider-output">{current}</output> : null}
+            {showValue ? <output id={valueId} htmlFor={sliderId} className="ml-slider-output">{formatValue ? formatValue(current) : current}</output> : null}
           </div>
         ) : null}
         <div
@@ -58,7 +60,7 @@ const Slider = React.forwardRef<HTMLDivElement, SliderProps>(
           aria-valuemin={low}
           aria-valuemax={high}
           aria-valuenow={current}
-          aria-valuetext={`${current} of ${high}`}
+          aria-valuetext={formatValue ? formatValue(current) : `${current} of ${high}`}
           aria-labelledby={labelledBy ?? labelId}
           aria-label={labelledBy || label ? undefined : (ariaLabel ?? "Value")}
           aria-describedby={[describedBy, valueId].filter(Boolean).join(" ") || undefined}

package/registry/source-manifest.json

@@ -53,7 +53,7 @@
   "packages/components/select/select.tsx": "sha256-7u1sshW6KAQgjgwQ1siN1P5GkBxboOiOJOdgLanForE=",
   "packages/components/sheet/sheet.tsx": "sha256-U5uuIle4HMkKILrxBqp+cimv7aKGurWa8s7RYhbuIM8=",
   "packages/components/skeleton/skeleton.tsx": "sha256-2Fk72NbLr3+CrXH7jGbHNsc3t+vskMqSyySe/UwbGCs=",
-  "packages/components/slider/slider.tsx": "sha256-o37Xi4J8+d/fhWFf2LdpPluuKDVXECNl4quKTlrqCU4=",
+  "packages/components/slider/slider.tsx": "sha256-u0CIgpYSseu6yGQZQjjWvoFup9OC/ZJbeKUMlQ1yf8c=",
   "packages/components/spinner/spinner.tsx": "sha256-FZQmcGkQ8N0485n9bYsLTpTnolbM729YKjkQrXriz9A=",
   "packages/components/status-icon/labels.ts": "sha256-EE8q+geQBbJUs7I3RmaHZnPwn7Vjk2GjCfxvI4ruXKM=",
   "packages/components/status-icon/status-icon.tsx": "sha256-TtrTeoePyfH1VhKuWC0v12FuwfgND1CHnH5x8fyf4AM=",

package/src/knowledge.js

@@ -256,10 +256,83 @@ function handSpacing(text) {
 
 const SPACING_FIX = "Measure with the scale: var(--ml-space-2), var(--ml-space-4)… (get_tokens spacing), or a calc() of its steps; space that grows with the window is var(--ml-space-fluid-sm)… to -xl. An em tuned to the font is fine; a length invented between the steps is not.";
 
+/** One opening tag, the whole of it: its name and its attributes. */
+const OPENING_TAG = /^<([A-Za-z][\w.-]*)((?:\s+(?:[^\s"'>={}]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|\{(?:[^{}]|\{[^{}]*\})*\}))?))*)\s*\/?>$/;
+/** The longest an opening tag may run before it is taken to be text. */
+const MAX_TAG = 8192;
+
+/**
+ * Where each candidate opening tag starts and ends, found in one pass:
+ * quotes and JSX braces are skipped over, a tag ends at the first ">"
+ * outside them, and a "<" outside them means the one before was not a tag.
+ * The pattern above then reads each candidate on its own. Markup is anyone's
+ * input (a pasted page, a fetched site), so nothing here rescans what it has
+ * passed: a tag left open costs no more than its own length.
+ */
+function* tagSpans(markup) {
+  let start = markup.indexOf("<");
+  while (start >= 0) {
+    if (!/[A-Za-z]/.test(markup[start + 1] ?? "")) {
+      start = markup.indexOf("<", start + 1);
+      continue;
+    }
+    let quote = "";
+    let depth = 0;
+    let end = -1;
+    let next = -1;
+    let at = start + 1;
+    for (; at < markup.length && at - start <= MAX_TAG; at += 1) {
+      const char = markup[at];
+      if (quote) {
+        if (char === quote) quote = "";
+      } else if (depth > 0) {
+        if (char === "{") depth += 1;
+        else if (char === "}") depth -= 1;
+      } else if (char === '"' || char === "'") quote = char;
+      else if (char === "{") depth = 1;
+      else if (char === ">") {
+        end = at;
+        break;
+      } else if (char === "<") {
+        next = at;
+        break;
+      }
+    }
+    if (end >= 0) {
+      yield [start, end + 1];
+      start = markup.indexOf("<", end + 1);
+    } else start = next >= 0 ? next : markup.indexOf("<", at);
+  }
+}
+
+/**
+ * Each <style> block, shaped like a match ([whole, body], index), found with
+ * indexOf so a block left open costs one scan to the end and no more.
+ */
+function* styleBlocks(markup) {
+  const lower = markup.toLowerCase();
+  let from = 0;
+  while (from < markup.length) {
+    const open = lower.indexOf("<style", from);
+    if (open < 0) return;
+    const opened = markup.indexOf(">", open);
+    if (opened < 0) return;
+    const close = lower.indexOf("</style>", opened + 1);
+    if (close < 0) return;
+    const block = [markup.slice(open, close + 8), markup.slice(opened + 1, close)];
+    block.index = open;
+    yield block;
+    from = close + 8;
+  }
+}
+
 /** Every opening tag in HTML or JSX, with its string-valued attributes. */
 export function tagsOf(markup) {
   const tags = [];
-  for (const match of markup.matchAll(/<([A-Za-z][\w.-]*)((?:\s+(?:[^\s"'>={}]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|\{(?:[^{}]|\{[^{}]*\})*\}))?))*)\s*\/?>/g)) {
+  for (const [from, to] of tagSpans(markup)) {
+    const match = OPENING_TAG.exec(markup.slice(from, to));
+    if (!match) continue;
+    match.index = from;
     const attributes = new Map();
     for (const attribute of match[2].matchAll(/([^\s"'>={}]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|(\{(?:[^{}]|\{[^{}]*\})*\})))?/g)) {
       const [, name, double, single, expression] = attribute;
@@ -474,7 +547,7 @@ export function checkMarkup(markup, { themes: ownThemes = [], contract: installe
   }
 
   // The page's own stylesheet: the same rules hold in a <style> block.
-  for (const block of markup.matchAll(/<style[^>]*>([\s\S]*?)<\/style>/gi)) {
+  for (const block of styleBlocks(markup)) {
     // Comments become blanks of the same length, so every offset still points into the markup.
     const css = block[1].replace(/\/\*[\s\S]*?\*\//g, (comment) => comment.replace(/[^\n]/g, " "));
     let offset = block.index + block[0].indexOf(">") + 1;