@dorsk/tsumikit 0.81.0 → 0.82.0

package/dist/styles/fonts/LICENSE-Inter.txt

@@ -0,0 +1,92 @@
+Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/dist/styles/themes.css

@@ -20,10 +20,10 @@
   --c-border-strong: #7f858d;
   --c-text: #1a1d23;
   --c-text-muted: #5b6472;
-  --c-text-faint: #616979;
-  --c-accent: #007a50;
+  --c-text-faint: #7d8495;
+  --c-accent: #0b5cad;
   --c-accent-ink: #ffffff;
-  --c-accent-dim: #9bd9c2;
+  --c-accent-dim: #87aad6;
   --c-blue: #0f64c0;
   --c-amber: #926100;
   --c-red: #c63732;
@@ -53,10 +53,10 @@
   --c-border-strong: #8f7c57;
   --c-text: #3b2f1e;
   --c-text-muted: #6c5a3f;
-  --c-text-faint: #726041;
-  --c-accent: #456c3b;
+  --c-text-faint: #8e7b5d;
+  --c-accent: #2f6786;
   --c-accent-ink: #faf3e3;
-  --c-accent-dim: #aec79f;
+  --c-accent-dim: #91a8b0;
   --c-blue: #1d628e;
   --c-amber: #875b00;
   --c-red: #b03b35;
@@ -84,7 +84,7 @@
   --c-border-strong: #888ca2;
   --c-text: #cdd6f4;
   --c-text-muted: #bac2de;
-  --c-text-faint: #a7adc5;
+  --c-text-faint: #878ea4;
   --c-accent: #cba6f7;
   --c-accent-ink: #1e1e2e;
   --c-accent-dim: #6c7086;
@@ -114,7 +114,7 @@
   --c-border-strong: #8394c8;
   --c-text: #f8f8f2;
   --c-text-muted: #c7c9d1;
-  --c-text-faint: #a4b7ed;
+  --c-text-faint: #8395ca;
   --c-accent: #cfb1ff;
   --c-accent-ink: #1d1726;
   --c-accent-dim: #6f558f;
@@ -144,7 +144,7 @@
   --c-border-strong: #7a9fcc;
   --c-text: #eceff4;
   --c-text-muted: #d8dee9;
-  --c-text-faint: #a5d3d2;
+  --c-text-faint: #78a5a5;
   --c-accent: #9cd5e5;
   --c-accent-ink: #1f242d;
   --c-accent-dim: #5e81ac;
@@ -174,7 +174,7 @@
   --c-border-strong: #71799c;
   --c-text: #c0caf5;
   --c-text-muted: #9aa5ce;
-  --c-text-faint: #8c97c4;
+  --c-text-faint: #6f79a3;
   --c-accent: #7aa2f7;
   --c-accent-ink: #11121d;
   --c-accent-dim: #3d59a1;
@@ -203,13 +203,13 @@
   --c-border-strong: #8f857d;
   --c-text: #ebdbb2;
   --c-text-muted: #d5c4a1;
-  --c-text-faint: #b5a590;
+  --c-text-faint: #958670;
   --c-accent: #ff821e;
   --c-accent-ink: #1d1a14;
   --c-accent-dim: #af3a03;
   --c-blue: #8dafa2;
   --c-amber: #fabd2f;
-  --c-red: #ff826e;
+  --c-red: #ff9494;
   --c-green: #b8bb26;
   --c-violet: #df91a6;
   --c-gold: #fabd2f;
@@ -232,7 +232,7 @@
   --c-border-strong: #758c93;
   --c-text: #eee8d5;
   --c-text-muted: #a3b2b2;
-  --c-text-faint: #95acb4;
+  --c-text-faint: #768d93;
   --c-accent: #4ebdb3;
   --c-accent-ink: #002b36;
   --c-accent-dim: #1a6b66;
@@ -261,7 +261,7 @@
   --c-border-strong: #77748b;
   --c-text: #e0def4;
   --c-text-muted: #9c98b6;
-  --c-text-faint: #9591af;
+  --c-text-faint: #767490;
   --c-accent: #c4a7e7;
   --c-accent-ink: #14121d;
   --c-accent-dim: #6c5d8a;
@@ -290,7 +290,7 @@
   --c-border-strong: #838b9e;
   --c-text: #bdc4d1;
   --c-text-muted: #abb3c2;
-  --c-text-faint: #a4acba;
+  --c-text-faint: #848c9a;
   --c-accent: #6ebcfd;
   --c-accent-ink: #11151c;
   --c-accent-dim: #2c6da3;
@@ -319,10 +319,10 @@
   --c-border-strong: #8d989e;
   --c-text: #ddd0b4;
   --c-text-muted: #bbc4b7;
-  --c-text-faint: #aebdb2;
-  --c-accent: #bbd594;
+  --c-text-faint: #8b9b8f;
+  --c-accent: #85dadf;
   --c-accent-ink: #1c2226;
-  --c-accent-dim: #5c6f49;
+  --c-accent-dim: #588388;
   --c-blue: #99d7ce;
   --c-amber: #e6c689;
   --c-red: #ffb7b6;
@@ -348,10 +348,10 @@
   --c-border-strong: #8b8a7c;
   --c-text: #f8f8f2;
   --c-text-muted: #cfcfc2;
-  --c-text-faint: #aeaa95;
-  --c-accent: #a6e22e;
+  --c-text-faint: #8d8a74;
+  --c-accent: #66d9ef;
   --c-accent-ink: #14160f;
-  --c-accent-dim: #5f7d18;
+  --c-accent-dim: #4a7b81;
   --c-blue: #66d9ef;
   --c-amber: #fd971f;
   --c-red: #ff7495;
@@ -381,10 +381,10 @@
   --c-border-strong: #c8c8c8;
   --c-text: #ffffff;
   --c-text-muted: #c8c8c8;
-  --c-text-faint: #8e8e8e;
-  --c-accent: #34e89e;
+  --c-text-faint: #696968;
+  --c-accent: #38d0ff;
   --c-accent-ink: #000000;
-  --c-accent-dim: #1f8f62;
+  --c-accent-dim: #0f4f63;
   --c-blue: #4db5ff;
   --c-amber: #ffc24b;
   --c-red: #ff6b6b;
@@ -416,10 +416,10 @@
   --c-border-strong: #707070;
   --c-text: #000000;
   --c-text-muted: #2e2e2e;
-  --c-text-faint: #555555;
-  --c-accent: #037b4d;
+  --c-text-faint: #6c6b6b;
+  --c-accent: #0a4fc4;
   --c-accent-ink: #ffffff;
-  --c-accent-dim: #6fbf9a;
+  --c-accent-dim: #87aae6;
   --c-blue: #0b5fc4;
   --c-amber: #946100;
   --c-red: #c4150c;
@@ -452,7 +452,7 @@
   --c-border-strong: #737986;
   --c-text: #f2f4f8;
   --c-text-muted: #b6bdc9;
-  --c-text-faint: #8f98a7;
+  --c-text-faint: #717b89;
   --c-accent: #56b4e9; /* sky blue — distinct from the green "ok" */
   --c-accent-ink: #06131c;
   --c-accent-dim: #2c6f93;
@@ -479,7 +479,7 @@
    light, soft shadows, pale-tint/dark-ink machine badges.
    =================================================================== */
 
-/* ---- Gruvbox Light (medium) — warm wood/cream, faded orange accent. */
+/* ---- Gruvbox Light (medium) — warm wood/cream, deep teal accent. */
 [data-theme="gruvboxlight"] {
   color-scheme: light;
   --c-bg: #fbf1c7;
@@ -490,10 +490,10 @@
   --c-border-strong: #887a60;
   --c-text: #3c3836;
   --c-text-muted: #504945;
-  --c-text-faint: #6a5d53;
-  --c-accent: #aa3700;
+  --c-text-faint: #86786e;
+  --c-accent: #0b5f6a;
   --c-accent-ink: #fbf1c7;
-  --c-accent-dim: #d65d0e;
+  --c-accent-dim: #8aa699;
   --c-blue: #076678;
   --c-amber: #875500;
   --c-red: #9d0006;
@@ -521,7 +521,7 @@
   --c-border-strong: #88826c;
   --c-text: #073642;
   --c-text-muted: #4f646b;
-  --c-text-faint: #59696b;
+  --c-text-faint: #748486;
   --c-accent: #00736c;
   --c-accent-ink: #fdf6e3;
   --c-accent-dim: #2aa198;
@@ -552,10 +552,10 @@
   --c-border-strong: #7c816e;
   --c-text: #445159;
   --c-text-muted: #516069;
-  --c-text-faint: #5b6659;
-  --c-accent: #5c6a00;
+  --c-text-faint: #768174;
+  --c-accent: #1a6a8c;
   --c-accent-ink: #fdf6e3;
-  --c-accent-dim: #8da101;
+  --c-accent-dim: #90afb8;
   --c-blue: #006a98;
   --c-amber: #835c00;
   --c-red: #bf1422;
@@ -583,7 +583,7 @@
   --c-border-strong: #868285;
   --c-text: #534e75;
   --c-text-muted: #625e7b;
-  --c-text-faint: #6a6576;
+  --c-text-faint: #858092;
   --c-accent: #6f5986;
   --c-accent-ink: #faf4ed;
   --c-accent-dim: #907aa9;
@@ -614,7 +614,7 @@
   --c-border-strong: #767985;
   --c-text: #474a63;
   --c-text-muted: #555870;
-  --c-text-faint: #5b5e6e;
+  --c-text-faint: #757889;
   --c-accent: #771eda;
   --c-accent-ink: #eff1f5;
   --c-accent-dim: #8839ef;
@@ -646,7 +646,7 @@
   --c-border-strong: #7a808c;
   --c-text: #2e3440;
   --c-text-muted: #434c5e;
-  --c-text-faint: #5a6578;
+  --c-text-faint: #758094;
   --c-accent: #486a94;
   --c-accent-ink: #eceff4;
   --c-accent-dim: #5e81ac;
@@ -678,7 +678,7 @@
   --c-border-strong: #70748b;
   --c-text: #1c419d;
   --c-text-muted: #42518c;
-  --c-text-faint: #51587e;
+  --c-text-faint: #6c729a;
   --c-accent: #0051b0;
   --c-accent-ink: #ffffff;
   --c-accent-dim: #2e7de9;
@@ -710,7 +710,7 @@
   --c-border-strong: #7e764c;
   --c-text: #464656;
   --c-text-muted: #5b5074;
-  --c-text-faint: #5c5967;
+  --c-text-faint: #777382;
   --c-accent: #624c83;
   --c-accent-ink: #f2ecbc;
   --c-accent-dim: #624c83;
@@ -746,7 +746,7 @@
   --c-border-strong: #9faabb;
   --c-text: #e6eaf0;
   --c-text-muted: #cfd7e1;
-  --c-text-faint: #c6cfdc;
+  --c-text-faint: #a2abb8;
   --c-accent: #c8e0ff;
   --c-accent-ink: #1d232b;
   --c-accent-dim: #4f6680;
@@ -775,10 +775,10 @@
   --c-border-strong: #9da798;
   --c-text: #e4e8dc;
   --c-text-muted: #cdd3c5;
-  --c-text-faint: #c4cbbb;
-  --c-accent: #bfe196;
+  --c-text-faint: #a0a897;
+  --c-accent: #a8dff5;
   --c-accent-ink: #1f251c;
-  --c-accent-dim: #5d7146;
+  --c-accent-dim: #6e8b90;
   --c-blue: #b0dcfb;
   --c-amber: #f2d087;
   --c-red: #ffc8c1;
@@ -804,10 +804,10 @@
   --c-border-strong: #b09d8c;
   --c-text: #f0e6da;
   --c-text-muted: #d8caba;
-  --c-text-faint: #d2c2ae;
-  --c-accent: #f3c68c;
+  --c-text-faint: #af9f8b;
+  --c-accent: #9bdbe8;
   --c-accent-ink: #2a2019;
-  --c-accent-dim: #7a5d3e;
+  --c-accent-dim: #728787;
   --c-blue: #b1d1e9;
   --c-amber: #f5c77f;
   --c-red: #ffbfb0;
@@ -833,10 +833,10 @@
   --c-border-strong: #a6a6a6;
   --c-text: #e5e5d5;
   --c-text-muted: #d4d4c3;
-  --c-text-faint: #ccccbc;
-  --c-accent: #a0e5e8;
+  --c-text-faint: #a9a898;
+  --c-accent: #abdbfe;
   --c-accent-ink: #2b2b2b;
-  --c-accent-dim: #5f7f7f;
+  --c-accent-dim: #738999;
   --c-blue: #a0e5e8;
   --c-amber: #ffcead;
   --c-red: #ffcccb;
@@ -863,10 +863,10 @@
   --c-border-strong: #736b5e;
   --c-text: #2a2620;
   --c-text-muted: #4d473e;
-  --c-text-faint: #585146;
-  --c-accent: #305b4b;
+  --c-text-faint: #726a60;
+  --c-accent: #2b5577;
   --c-accent-ink: #f3f0ea;
-  --c-accent-dim: #9db3a7;
+  --c-accent-dim: #7f92a0;
   --c-blue: #1e4f79;
   --c-amber: #6f4d00;
   --c-red: #913328;
@@ -893,7 +893,7 @@
   --c-border-strong: #636e7b;
   --c-text: #1f252c;
   --c-text-muted: #3e4753;
-  --c-text-faint: #4a5461;
+  --c-text-faint: #646d7b;
   --c-accent: #235591;
   --c-accent-ink: #f2f5f8;
   --c-accent-dim: #9bb2cf;
@@ -923,10 +923,10 @@
   --c-border-strong: #66715d;
   --c-text: #232a20;
   --c-text-muted: #424b3e;
-  --c-text-faint: #4c5648;
-  --c-accent: #325f2a;
+  --c-text-faint: #667062;
+  --c-accent: #2f5a78;
   --c-accent-ink: #f1f4ee;
-  --c-accent-dim: #a5bb9c;
+  --c-accent-dim: #7d96a1;
   --c-blue: #235272;
   --c-amber: #724d04;
   --c-red: #93352f;

package/dist/styles/tokens.css

@@ -22,11 +22,11 @@
   --c-border-strong: #757d8b;
   --c-text: #e6e9ef;
   --c-text-muted: #9aa3b2;
-  --c-text-faint: #929bad;
+  --c-text-faint: #747e8e;
 
-  --c-accent: #5ad6a0;
+  --c-accent: #4cc3f0;
   --c-accent-ink: #04130c;
-  --c-accent-dim: #2a6e54;
+  --c-accent-dim: #306379;
 
   --c-blue: #5aa9ff;
   --c-amber: #f0b454;
@@ -55,7 +55,7 @@
   --syn-keyword: var(--c-violet);
   --syn-string: var(--c-green);
   --syn-number: var(--c-amber);
-  --syn-comment: var(--c-text-faint);
+  --syn-comment: var(--c-text-muted);
   --syn-function: var(--c-blue);
   --syn-punct: var(--c-text-muted);
 
@@ -107,16 +107,22 @@
   --mach-border-sl: 45% 35%;
 
   /* ---- Typography ---- */
+  /* "Inter" resolves only when font.css (bundled, app.css imports it) is loaded;
+     otherwise the system stack applies. */
   --font-sans:
-    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
+    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, sans-serif;
   --font-mono:
     ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas,
     monospace;
-  /* Non-code UI text: counts and stat values (--font-numeric), eyebrow labels
-     and shortcut hints (--font-label). Code-ish slots keep --font-mono. */
-  --font-numeric: var(--font-mono);
-  --font-label: var(--font-mono);
+  /* Non-code UI text: counts and stat values (--font-numeric, pair with
+     tabular-nums), eyebrow labels and shortcut hints (--font-label). Code-ish
+     slots keep --font-mono. Revert to the pre-0.82 look with
+     --font-numeric: var(--font-mono). */
+  --font-numeric: var(--font-sans);
+  --font-label: var(--font-sans);
+  /* Line length cap for reading text (Prose, Text `measure`); `none` lifts it. */
+  --measure: 68ch;
 
   /* Text-scale factor (CCT-305). The UI font control multiplies ONLY the
 	   font-size tokens by this — not the root font-size — so bumping the size up

package/dist/url-state.svelte.d.ts

@@ -0,0 +1,22 @@
+export interface UrlStateOptions<T> {
+    /** Value when the param is absent; a value serializing to the same string removes the param. */
+    default: T;
+    parse?: (raw: string) => T;
+    serialize?: (value: T) => string;
+    /** Add a history entry per change instead of replacing the current one. */
+    push?: boolean;
+}
+export interface UrlState<T> {
+    value: T;
+    /** The current URL with the param set to `value` — for `href` on Tabs, SegmentedControl and Pagination. */
+    href(value: T): string;
+}
+/**
+ * One search param as reactive state: `value` reads the param (or `default`),
+ * assigning writes it back with `history.replaceState` (`pushState` with
+ * `push`), and the browser's back/forward keep it in sync. Without a `window`
+ * it holds `default`, so it is safe to create during SSR.
+ */
+export declare function urlState<T = string>(key: string, options: UrlStateOptions<T>): UrlState<T>;
+/** A click the browser should keep: modifier keys or a non-primary button (open in a new tab/window). */
+export declare function isModifiedClick(e: MouseEvent): boolean;

package/dist/url-state.svelte.js

@@ -0,0 +1,64 @@
+import { createSubscriber } from 'svelte/reactivity';
+/**
+ * One search param as reactive state: `value` reads the param (or `default`),
+ * assigning writes it back with `history.replaceState` (`pushState` with
+ * `push`), and the browser's back/forward keep it in sync. Without a `window`
+ * it holds `default`, so it is safe to create during SSR.
+ */
+export function urlState(key, options) {
+    const parse = options.parse ?? ((raw) => raw);
+    const serialize = options.serialize ?? ((value) => String(value));
+    const fallback = serialize(options.default);
+    const read = () => {
+        if (typeof window === 'undefined')
+            return options.default;
+        const raw = new URLSearchParams(window.location.search).get(key);
+        return raw === null ? options.default : parse(raw);
+    };
+    const urlFor = (value) => {
+        const url = new URL(window.location.href);
+        const raw = serialize(value);
+        if (raw === fallback)
+            url.searchParams.delete(key);
+        else
+            url.searchParams.set(key, raw);
+        return url;
+    };
+    let current = $state.raw(read());
+    const subscribe = createSubscriber(() => {
+        const sync = () => {
+            current = read();
+        };
+        window.addEventListener('popstate', sync);
+        return () => window.removeEventListener('popstate', sync);
+    });
+    return {
+        get value() {
+            if (typeof window === 'undefined')
+                return current;
+            if (!$effect.tracking())
+                return read();
+            subscribe();
+            return current;
+        },
+        set value(next) {
+            current = next;
+            if (typeof window === 'undefined')
+                return;
+            const url = urlFor(next);
+            if (url.href === window.location.href)
+                return;
+            window.history[options.push ? 'pushState' : 'replaceState'](window.history.state, '', url);
+        },
+        href(value) {
+            if (typeof window === 'undefined')
+                return `?${key}=${encodeURIComponent(serialize(value))}`;
+            const url = urlFor(value);
+            return `${url.pathname}${url.search}${url.hash}`;
+        },
+    };
+}
+/** A click the browser should keep: modifier keys or a non-primary button (open in a new tab/window). */
+export function isModifiedClick(e) {
+    return e.button !== 0 || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey;
+}

package/lint/breakpoints.mjs

@@ -0,0 +1,33 @@
+/**
+ * The kit's breakpoint contract. Media queries in consumer apps should only use
+ * these widths (min-width form) or their max-width complements (one unit below,
+ * e.g. 39.999rem / 639px / 639.98px).
+ */
+export const BREAKPOINTS = [
+	{ name: 'sm', rem: 40, px: 640 },
+	{ name: 'md', rem: 48, px: 768 },
+	{ name: 'lg', rem: 64, px: 1024 }
+];
+
+const LENGTH = /^(-?\d*\.?\d+)(px|rem|em)$/;
+
+/**
+ * True when a media-query width token (e.g. "640px", "47.999rem") is one of the
+ * kit's breakpoints or a max-width complement of one. `em` in a media query
+ * resolves against the root font size, so it is treated like `rem`.
+ * @param {string} token
+ */
+export function isAllowedBreakpointWidth(token) {
+	const m = LENGTH.exec(token.trim());
+	if (!m) return false;
+	const value = Number(m[1]);
+	const key = m[2] === 'px' ? 'px' : 'rem';
+	return BREAKPOINTS.some((bp) => {
+		const target = bp[key];
+		return value === target || (value >= target - 1 && value < target);
+	});
+}
+
+export function describeBreakpoints() {
+	return BREAKPOINTS.map((bp) => `${bp.rem}rem/${bp.px}px`).join(', ');
+}