@mohasinac/appkit 4.62.0 → 4.62.1

package/dist/tokens/themes/default-dark.js

@@ -54,6 +54,7 @@ export const DEFAULT_DARK_THEME = {
         "appkit-color-text": "#fafafa",
         "appkit-color-text-muted": "#b4b4bd",
         "appkit-color-text-faint": "#8b8b94",
+        "appkit-color-link": "#22d3ee",
         "appkit-color-success": "#34d399",
         "appkit-color-success-surface": "rgba(6, 78, 59, 0.25)",
         "appkit-color-warning": "#fbbf24",

package/dist/tokens/themes/default-light.js

@@ -57,6 +57,7 @@ export const DEFAULT_LIGHT_THEME = {
         "appkit-color-text-muted": "#5b5b63",
         "appkit-color-text-faint": "#6f6f78",
         "appkit-color-text-on-primary": "#ffffff",
+        "appkit-color-link": "#0f766e",
         "appkit-color-success": "#15803d",
         "appkit-color-success-surface": "#f0fdf4",
         "appkit-color-warning": "#b45309",

package/dist/tokens/themes/required.d.ts

@@ -10,6 +10,6 @@ import type { GradientKey } from "./types";
  * unknown keys are rejected; missing keys fall back to the active mode's
  * default theme value (so a theme can override only a subset).
  */
-export declare const REQUIRED_THEME_TOKENS: readonly ["appkit-color-primary", "appkit-color-primary-50", "appkit-color-primary-100", "appkit-color-primary-200", "appkit-color-primary-300", "appkit-color-primary-400", "appkit-color-primary-500", "appkit-color-primary-600", "appkit-color-primary-700", "appkit-color-primary-800", "appkit-color-primary-900", "appkit-color-primary-950", "appkit-color-secondary", "appkit-color-secondary-50", "appkit-color-secondary-100", "appkit-color-secondary-200", "appkit-color-secondary-300", "appkit-color-secondary-400", "appkit-color-secondary-500", "appkit-color-secondary-600", "appkit-color-secondary-700", "appkit-color-secondary-800", "appkit-color-secondary-900", "appkit-color-secondary-950", "appkit-color-bg", "appkit-color-surface", "appkit-color-surface-elevated", "appkit-color-surface-input", "appkit-color-border", "appkit-color-border-subtle", "appkit-color-text", "appkit-color-text-muted", "appkit-color-text-faint", "appkit-color-text-on-primary", "appkit-color-success", "appkit-color-success-surface", "appkit-color-warning", "appkit-color-warning-surface", "appkit-color-error", "appkit-color-error-surface", "appkit-color-info", "appkit-color-info-surface", "appkit-color-focus-ring", "appkit-shadow-glow", "appkit-shadow-glow-pink", "appkit-font-display", "appkit-font-sans", "appkit-font-editorial", "appkit-font-mono", "appkit-space-0-5", "appkit-space-1", "appkit-space-1-5", "appkit-space-2", "appkit-space-2-5", "appkit-space-3", "appkit-space-3-5", "appkit-space-4", "appkit-space-5", "appkit-space-6", "appkit-space-8", "appkit-space-10", "appkit-space-12", "appkit-space-14", "appkit-space-16", "appkit-space-18", "appkit-space-20", "appkit-space-24", "appkit-text-2xs", "appkit-text-xs", "appkit-text-sm", "appkit-text-base", "appkit-text-lg", "appkit-text-xl", "appkit-text-2xl", "appkit-text-3xl", "appkit-text-4xl", "appkit-text-5xl"];
+export declare const REQUIRED_THEME_TOKENS: readonly ["appkit-color-primary", "appkit-color-primary-50", "appkit-color-primary-100", "appkit-color-primary-200", "appkit-color-primary-300", "appkit-color-primary-400", "appkit-color-primary-500", "appkit-color-primary-600", "appkit-color-primary-700", "appkit-color-primary-800", "appkit-color-primary-900", "appkit-color-primary-950", "appkit-color-secondary", "appkit-color-secondary-50", "appkit-color-secondary-100", "appkit-color-secondary-200", "appkit-color-secondary-300", "appkit-color-secondary-400", "appkit-color-secondary-500", "appkit-color-secondary-600", "appkit-color-secondary-700", "appkit-color-secondary-800", "appkit-color-secondary-900", "appkit-color-secondary-950", "appkit-color-bg", "appkit-color-surface", "appkit-color-surface-elevated", "appkit-color-surface-input", "appkit-color-border", "appkit-color-border-subtle", "appkit-color-text", "appkit-color-text-muted", "appkit-color-text-faint", "appkit-color-text-on-primary", "appkit-color-link", "appkit-color-success", "appkit-color-success-surface", "appkit-color-warning", "appkit-color-warning-surface", "appkit-color-error", "appkit-color-error-surface", "appkit-color-info", "appkit-color-info-surface", "appkit-color-focus-ring", "appkit-shadow-glow", "appkit-shadow-glow-pink", "appkit-font-display", "appkit-font-sans", "appkit-font-editorial", "appkit-font-mono", "appkit-space-0-5", "appkit-space-1", "appkit-space-1-5", "appkit-space-2", "appkit-space-2-5", "appkit-space-3", "appkit-space-3-5", "appkit-space-4", "appkit-space-5", "appkit-space-6", "appkit-space-8", "appkit-space-10", "appkit-space-12", "appkit-space-14", "appkit-space-16", "appkit-space-18", "appkit-space-20", "appkit-space-24", "appkit-text-2xs", "appkit-text-xs", "appkit-text-sm", "appkit-text-base", "appkit-text-lg", "appkit-text-xl", "appkit-text-2xl", "appkit-text-3xl", "appkit-text-4xl", "appkit-text-5xl"];
 export type RequiredThemeToken = (typeof REQUIRED_THEME_TOKENS)[number];
 export declare const REQUIRED_GRADIENT_KEYS: readonly GradientKey[];

package/dist/tokens/themes/required.js

@@ -47,6 +47,7 @@ export const REQUIRED_THEME_TOKENS = [
     "appkit-color-text-muted",
     "appkit-color-text-faint",
     "appkit-color-text-on-primary",
+    "appkit-color-link",
     // Status
     "appkit-color-success",
     "appkit-color-success-surface",

package/dist/tokens/tokens.css

@@ -302,6 +302,15 @@
   --appkit-color-text-on-primary:  #ffffff;
   --appkit-color-text-on-dark:     #ffffff;
 
+  /* Link ink for long-form prose. A SEPARATE token because the right link
+   * colour is not the same ramp in every theme: default-light wants primary
+   * (teal), default-dark wants secondary (cyan) because its primary is a RED
+   * that reads as danger, and cobalt-night's primary IS blue. Binding prose
+   * links to `primary-600` instead would be #dc2626 on the dark theme.
+   * primary-700, not -600: #0d9488 is only 3.59:1 on --appkit-color-bg and
+   * fails AA for normal text; #0f766e is 5.24:1. */
+  --appkit-color-link:             #0f766e;    /* primary-700 — 5.24:1 on --appkit-color-bg */
+
   --appkit-color-success:          #15803d;    /* green-700 — 4.5:1 AA against success-surface, distinct from the new teal primary */
   --appkit-color-success-surface:  #f0fdf4;    /* green-50 */
   --appkit-color-warning:          #b45309;    /* amber-700 — 4.5:1 AA against warning-surface */
@@ -500,6 +509,8 @@
   --appkit-color-text-muted:       #b4b4bd;    /* lightened from zinc-400 #a1a1aa — ~9:1 on the dark page */
   --appkit-color-text-faint:       #8b8b94;    /* lightened from zinc-500 #71717a, which was ~3:1 and read as barely present */
 
+  --appkit-color-link:             #22d3ee;    /* secondary-400 — 11.16:1 on --appkit-color-bg. NOT primary: this theme's primary is crimson */
+
   --appkit-color-success:          #34d399;    /* emerald-400 */
   --appkit-color-success-surface:  rgba(6, 78, 59, 0.25);
   --appkit-color-warning:          #fbbf24;    /* amber-400 */
@@ -620,6 +631,8 @@
   --appkit-color-text-muted:       #bcd4ff;    /* primary-200 */
   --appkit-color-text-faint:       #8eb9ff;    /* primary-300 */
 
+  --appkit-color-link:             #5992ff;    /* primary-500 — 5.17:1 on --appkit-color-bg */
+
   --appkit-color-success:          #4ade80;
   --appkit-color-success-surface:  rgba(20, 83, 45, 0.3);
   --appkit-color-warning:          #fbbf24;
@@ -652,6 +665,8 @@
   --appkit-color-surface-elevated: #ffffff;
   --appkit-color-surface-input:    #fffbeb;    /* amber-50 */
 
+  --appkit-color-link:             #b45309;    /* amber-700 — 4.73:1 on --appkit-color-bg; primary-600 #d97706 is only 3.0:1 */
+
   /* --- Interactive surfaces ------------------------------------------------
    * `-hover` is the neutral chrome hover fill; `-raised` is a resting panel one
    * step off the page surface; `primary-surface` is the brand-tinted hover.

package/dist/ui/components/Disclaimer.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { type DisclaimerId } from "../../_internal/shared/content/disclaimers";
+import { type PublishedValues } from "../../_internal/shared/content/published-values";
+export interface DisclaimerProps {
+    id: DisclaimerId;
+    /** Override the money figures with the admin's current configuration. */
+    publishedValues?: PublishedValues;
+    /**
+     * Render without the surrounding box — for a disclaimer that sits inside a
+     * card that already has chrome.
+     *
+     * 🛑 Does NOT make it smaller or quieter. A `warning`-tone entry keeps its
+     * tone inline, because the entries marked `warning` are the ones where
+     * ignoring the text has a consequence the reader cannot undo.
+     */
+    inline?: boolean;
+    className?: string;
+}
+export declare function Disclaimer({ id, publishedValues, inline, className, }: DisclaimerProps): React.JSX.Element | null;

package/dist/ui/components/Disclaimer.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Div, Stack, Text } from "../index.js";
+import { DISCLAIMERS, } from "../../_internal/shared/content/disclaimers.js";
+import { resolvePublishedCopy, resolvePublishedValues, } from "../../_internal/shared/content/published-values.js";
+/**
+ * The one way to render a disclaimer (Phase 12).
+ *
+ * ## 🛑 `id` only — there is no `text` prop, deliberately
+ *
+ * A `text` escape hatch would make this a styled box, and then the legally
+ * material disclaimers would be written at their call sites again, drift, and
+ * end up weakest exactly where they matter most. That is the failure this
+ * registry exists to close. If a surface needs a disclaimer that does not
+ * exist, the fix is a new registry entry — which is also what gets it
+ * reviewed.
+ *
+ * ## Tokens resolve here
+ *
+ * The protection entry quotes `{{saleProtectionMaxValue}}` and the claim
+ * windows, so the published limits come from the constants that ENFORCE them
+ * (Phase 9's mechanism). A change to `SALE_PROTECTION_MAX_VALUE` updates the
+ * terms rather than contradicting them.
+ *
+ * Code-derived values are the default; a caller with settings in hand passes
+ * better ones for the money figures.
+ *
+ * ## Safe in a Server Component
+ *
+ * No hooks, no state, and the registry is a plain object — so this renders on
+ * either side of the boundary. Do not add state here without checking every
+ * RSC call site (Root Cause #76).
+ */
+const CODE_DERIVED_VALUES = resolvePublishedValues();
+/**
+ * Renders `**bold**` and nothing else.
+ *
+ * 🛑 A deliberately tiny subset, not a markdown renderer. The emphasis is
+ * load-bearing in exactly the places it is used — "**not insurance**" in the
+ * protection entry, "**under review**" versus "**verified**" in the scam
+ * registry — and those are the phrases a reader skims past without it.
+ *
+ * 🛑 And it returns ELEMENTS, never HTML. The bodies are our own constants so
+ * injection is not the risk; the risk is that a `dangerouslySetInnerHTML`
+ * here would invite someone to pass admin-editable text through it later,
+ * which is how a disclaimer box becomes a stored-XSS surface.
+ */
+function renderEmphasis(text) {
+    return text.split(/(\*\*[^*]+\*\*)/g).map((part, i) => part.startsWith("**") && part.endsWith("**") && part.length > 4 ? (_jsx(Text, { as: "span", weight: "semibold", children: part.slice(2, -2) }, i)) : (_jsx(React.Fragment, { children: part }, i)));
+}
+export function Disclaimer({ id, publishedValues = CODE_DERIVED_VALUES, inline = false, className = "", }) {
+    const entry = DISCLAIMERS[id];
+    /*
+     * A `Record<DisclaimerId, …>` means this cannot happen through the type, but
+     * an `as DisclaimerId` cast at a call site could — and rendering nothing is
+     * the wrong failure here. A missing disclaimer is invisible, which is the
+     * whole problem; so it renders nothing only when the registry genuinely has
+     * no entry, and the audit is what catches that case before it ships.
+     */
+    if (!entry)
+        return null;
+    const body = resolvePublishedCopy(entry.body, publishedValues);
+    const content = (_jsxs(Stack, { gap: "xs", children: [entry.heading && (_jsx(Text, { size: "xs", weight: "semibold", transform: "uppercase", color: "muted", children: entry.heading })), _jsx(Text, { size: "xs", color: "muted", className: "leading-relaxed", children: renderEmphasis(body) })] }));
+    if (inline)
+        return _jsx(Div, { className: className, children: content });
+    /*
+     * 🛑 `surface` + the matching ink, never a status background with literal
+     * white text. `-surface` is a near-white tint in light themes and a dark
+     * tint in dark ones, so a fixed `text-white` is invisible in exactly one
+     * theme — Root Cause #67, which shipped 26 invisible surfaces that way.
+     * `Text color="muted"` above pairs correctly with both.
+     */
+    return (_jsx(Div, { surface: entry.tone === "warning" ? "warning-surface" : "muted", rounded: "lg", padding: "sm", className: className, children: content }));
+}

package/dist/ui/components/tabs-overflow.js

@@ -20,9 +20,16 @@
  */
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 /**
- * Slack used by the hysteresis rule below, in px. Matches
- * 2 x --appkit-tabs-arrow-size (2rem) — the width the two in-flow arrows
- * reclaim from the list when they unmount.
+ * Slack used by the hysteresis rule below, in px. Nominally
+ * 2 x --appkit-tabs-arrow-size (2rem), the width of the two in-flow arrows.
+ *
+ * 🛑 It is a SAFETY MARGIN, not a measurement, and the distinction is what
+ * this file got wrong badly enough to crash production. The arrows are not
+ * the only thing `data-arrows="true"` changes — it also hides the list's
+ * scrollbar — so the real width reclaimed on unmount is this number minus the
+ * platform scrollbar, and on a machine with overlay scrollbars it is this
+ * number exactly. The rule below is written to be stable for every value in
+ * that range rather than assuming one of them.
  */
 const ARROW_SLACK_PX = 64;
 /** Sub-pixel tolerance: scrollWidth/clientWidth can differ by <1px at some zooms. */
@@ -51,19 +58,65 @@ export function useTabsOverflow(listRef, activeKey) {
         const overflow = el.scrollWidth - el.clientWidth;
         const previous = stateRef.current.hasArrows;
         /*
-         * 🛑 HYSTERESIS — do not collapse this to a single threshold.
+         * 🛑 HYSTERESIS — do not collapse this to a single threshold, and do not
+         * "tidy" the negative one below back to a positive number.
          *
          * The arrows are IN-FLOW, so mounting them shrinks the list's clientWidth
-         * by ~ARROW_SLACK_PX, which INCREASES the measured overflow. With one
-         * threshold a strip 10px wider than its container oscillates forever:
-         *   hidden -> overflow 10 -> show -> overflow 74 -> still overflowing
-         *   -> ... -> hide -> overflow -54 -> hide -> widen -> overflow 10 -> show
+         * and INCREASES the measured overflow. With one threshold a strip 10px
+         * wider than its container oscillates forever.
+         *
+         * ## 🛑 THE PREVIOUS RULE WAS `overflow > ARROW_SLACK_PX` AND IT CRASHED
+         * ## EVERY STORE PAGE IN PRODUCTION WITH React #185 (max update depth).
          *
-         * Once the arrows are up they may only come down if the content would
+         * Its stability proof — "they may only come down if the content would
          * STILL fit after reclaiming their width, which by construction leaves
-         * overflow <= 0 afterwards. That makes the rule provably stable.
+         * overflow <= 0" — rests on mounting the arrows changing the measured
+         * overflow by EXACTLY `ARROW_SLACK_PX`. That is true of the arrows alone
+         * and FALSE of the net effect, because of a rule 100 lines away in
+         * `Tabs.style.css`:
+         *
+         *     .appkit-tabs-shell[data-arrows="true"] .appkit-tabs-list {
+         *       scrollbar-width: none;
+         *     }
+         *     …__arrow is 2rem; …-list::-webkit-scrollbar { display: none }
+         *
+         * The same `data-arrows="true"` that mounts the arrows also HIDES the
+         * scrollbar, handing the list back ~15px of clientWidth. So the net
+         * reclaimed width is ~49px, not 64 — and for any strip overflowing by
+         * 2..15px the two thresholds each imply the other:
+         *
+         *   hidden, overflow 10  -> 10 > 1    -> SHOW
+         *   shown,  overflow 59  -> 59 > 64?  -> no -> HIDE
+         *   hidden, overflow 10  -> …forever
+         *
+         * `useLayoutEffect` below runs on every render by design, so the loop is
+         * unbounded and React tears the tree down. The `sameState` guard cannot
+         * help: the state genuinely differs each pass.
+         *
+         * ## The rule now, stable for ANY reclaimed width
+         *
+         * Let r = whatever mounting the arrows adds to `overflow` (unknown, and
+         * provably NOT a constant — it depends on CSS this file cannot see, the
+         * platform's scrollbar width, and whether the user has overlay
+         * scrollbars). All we know is 0 <= r.
+         *
+         *   show:  hidden AND overflow >  EPSILON
+         *   hide:  shown  AND overflow <= -ARROW_SLACK_PX
+         *
+         * After SHOWING:  overflow' = overflow + r > EPSILON >= -ARROW_SLACK_PX,
+         *                 so the hide test cannot fire. No loop.
+         * After HIDING:   overflow' = overflow - r <= -ARROW_SLACK_PX <= EPSILON,
+         *                 so the show test cannot fire. No loop.
+         *
+         * Stable for every r >= 0, which is the point: the previous rule was
+         * stable only for one exact value of r that nothing enforced.
+         *
+         * The cost is deliberate conservatism — once up, the arrows stay up until
+         * the strip has a full ARROW_SLACK_PX of genuine slack. An arrow that
+         * lingers on a strip that just fits is a cosmetic blemish; the thing it
+         * replaces is a white screen.
          */
-        const hasArrows = previous ? overflow > ARROW_SLACK_PX : overflow > EPSILON;
+        const hasArrows = previous ? overflow > -ARROW_SLACK_PX : overflow > EPSILON;
         const max = el.scrollWidth - el.clientWidth;
         // Math.abs: scrollLeft is negative (or inverted) in RTL depending on engine.
         const position = Math.abs(el.scrollLeft);

package/dist/ui/index.d.ts

@@ -16,6 +16,8 @@ export type { SectionProps, SectionBackgroundConfig, ArticleProps, MainProps, As
 export { Section, sectionBackgroundStyle, Article, Main, Aside, Nav, BlockHeader, BlockFooter, Ul, Ol, Li, Table, Thead, Tbody, Tr, Th, Td, Code, Pre, Blockquote, Figure, Figcaption, Dl, Dt, Dd, } from "./components/Semantic";
 export type { DivProps } from "./components/Div";
 export { Div } from "./components/Div";
+export { Disclaimer } from "./components/Disclaimer";
+export type { DisclaimerProps } from "./components/Disclaimer";
 export type { SpecTableProps, SpecTableRow } from "./components/SpecTable";
 export { SpecTable } from "./components/SpecTable";
 export type { ColorVariant } from "./components/Typography";

package/dist/ui/index.js

@@ -30,6 +30,12 @@ export { FormErrorSummary } from "./forms/index.js";
 export { buildColumns, createColumnBuilder, renderBoolean, renderCurrency, renderCurrencyCompact, renderCount, renderNullable, renderRating, getStatusTone, getResourceIcon, } from "./columns/index.js";
 export { Section, sectionBackgroundStyle, Article, Main, Aside, Nav, BlockHeader, BlockFooter, Ul, Ol, Li, Table, Thead, Tbody, Tr, Th, Td, Code, Pre, Blockquote, Figure, Figcaption, Dl, Dt, Dd, } from "./components/Semantic.js";
 export { Div } from "./components/Div.js";
+/*
+ * Phase 12 — the one way to render a disclaimer. `id` only: there is no `text`
+ * prop, because an escape hatch would make it a styled box and the legally
+ * material disclaimers would be written at their call sites again.
+ */
+export { Disclaimer } from "./components/Disclaimer.js";
 export { SpecTable } from "./components/SpecTable.js";
 export { Heading, Text, Label, Caption, Span } from "./components/Typography.js";
 // --- Filter chip group (SB10-C completion, S8 2026-05-13) --------------------

package/dist/ui/rich-text/RichText.style.css

@@ -43,77 +43,42 @@
 
 
 /* --------------------------------------------------------------------------
- * THE PROSE PALETTE — rebound to appkit theme tokens.
+ * THE PROSE PALETTE LIVES IN THE CONSUMER, NOT HERE.
  *
- * 🛑 `dark:prose-invert` CANNOT COMPILE IN THIS PROJECT. Do not "fix" dark-mode
- * rich text by adding it to a call site, and do not add
- * `@source inline("dark:prose-invert")` to globals.css.
- *
- * Every `proseClass` string in appkit carries `dark:prose-invert` and NONE of
- * them has ever generated a rule, because:
- *   - the consumer build excludes appkit from scanning
- *     (`src/app/globals.css` → `@source not "../../appkit"`), and
- *   - `appkit/tailwind.config.js` does not load `@tailwindcss/typography`,
- *     so appkit's own `dist/tailwind-utilities.css` cannot emit it either.
- *
- * So `--tw-prose-invert-*` is DEFINED and never switched on. Every rich-text
- * surface on the site — product and auction descriptions, blog posts, policy
- * pages, FAQ answers, category `contentBody`, pre-orders, classifieds, digital
- * codes, live items, prize draws, events — rendered the light-theme palette in
- * every theme: body at gray-700 and links at gray-900, i.e. near-black on a
- * dark page. The links were effectively invisible.
+ * 🛑 Do NOT reinstate a `:root .prose { --tw-prose-*: ... !important }` block
+ * in this file. One lived here for months and it NEVER APPLIED.
  *
- * It was not merely unstyled, it was OVERRIDING: `important: true` in
- * `tailwind.config.js` emits `.prose :where(a) { color: var(--tw-prose-links)
- * !important }`, which beat the themed `.dark .appkit-rich-text a` rule further
- * down this file. All that theme-aware CSS was dead on arrival.
+ * The typography plugin emits `.prose { --tw-prose-*: <tailwind gray> }`, and
+ * the consumer's `important: true` makes each of those `!important` inside
+ * `@layer utilities`. The block here was unlayered, and justified itself with
+ * "`:root .prose` is (0,2,0) against `.prose`'s (0,1,0), so specificity
+ * decides and the outcome does not depend on bundle order."
  *
- * Rebinding the VARIABLES fixes it at the only point both problems meet: every
- * prose rule reads `var(--tw-prose-*)`, so one block re-themes body, links,
- * headings, bold, lists, quotes, captions, code and tables at once — in both
- * built-in themes AND in any admin-authored custom theme, which `prose-invert`
- * could never have done (its palette is hardcoded Tailwind grays).
+ * Specificity is never consulted. For the IMPORTANT tier, cascade-layer order
+ * is REVERSED and unlayered sorts LOWEST, so a layered `!important` beats an
+ * unlayered one at any specificity (Root Cause #106, measured in a browser).
+ * The plugin's hardcoded light-mode grays therefore won in every theme —
+ * links at gray-900, i.e. near-black on the near-black dark page, and
+ * black-instead-of-teal in light. The fix was invisible to every gate because
+ * the CSS was present and correct-looking in `dist/styles.css`; only a
+ * rendered page shows it losing.
  *
- * 🛑 The specificity is deliberate and must not be lowered. `.prose` declares
- * these variables with `!important`, so an equal-importance override is decided
- * by EMISSION ORDER between two separate stylesheets — the non-deterministic
- * trap of Root Cause #79. `:root .prose` is (0,2,0) against `.prose`'s (0,1,0),
- * so specificity decides and the outcome does not depend on bundle order. The
- * dark block at (0,3,0) also outranks `.dark .prose-invert` (0,2,0), so this
- * stays correct even if someone later makes `prose-invert` compile.
+ * Owner is now `tailwind.config.js` → `theme.extend.typography`, which makes
+ * the plugin emit the appkit tokens in the first place so there is exactly
+ * one declaration and no contest. Each binds to an `--appkit-color-*` that is
+ * redefined per theme, so prose re-themes for the built-in themes and for any
+ * admin-authored one.
  *
- * Not scoped to `.appkit-rich-text` on purpose: `PolicyPageView` and the scams
- * FAQ page apply `prose` to a bare `<div>` and had the identical defect.
+ * 🛑 `dark:prose-invert` CANNOT COMPILE IN THIS PROJECT. Do not "fix" dark
+ * rich text by adding it to a call site, and do not add
+ * `@source inline("dark:prose-invert")` to globals.css. Every `proseClass`
+ * string in appkit carries it and none has ever generated a rule, because the
+ * consumer build excludes appkit from scanning (`src/app/globals.css` →
+ * `@source not "../../appkit"`) and `appkit/tailwind.config.js` does not load
+ * `@tailwindcss/typography`, so appkit's own `dist/tailwind-utilities.css`
+ * cannot emit it either. It is moot now regardless: the tokens above invert on
+ * their own, which `prose-invert` could never do with its hardcoded grays.
  * -------------------------------------------------------------------------- */
-:root .prose {
-  --tw-prose-body: var(--appkit-color-text-muted) !important;
-  --tw-prose-headings: var(--appkit-color-text) !important;
-  --tw-prose-lead: var(--appkit-color-text-muted) !important;
-  --tw-prose-links: var(--appkit-color-primary-600) !important;
-  --tw-prose-bold: var(--appkit-color-text) !important;
-  --tw-prose-counters: var(--appkit-color-text-faint) !important;
-  --tw-prose-bullets: var(--appkit-color-text-faint) !important;
-  --tw-prose-hr: var(--appkit-color-border) !important;
-  --tw-prose-quotes: var(--appkit-color-text) !important;
-  --tw-prose-quote-borders: var(--appkit-color-primary) !important;
-  --tw-prose-captions: var(--appkit-color-text-faint) !important;
-  --tw-prose-kbd: var(--appkit-color-text) !important;
-  --tw-prose-kbd-shadows: 24 24 27 !important;
-  --tw-prose-code: var(--appkit-color-text) !important;
-  --tw-prose-pre-code: var(--appkit-color-slate-200) !important;
-  --tw-prose-pre-bg: var(--appkit-color-slate-800) !important;
-  --tw-prose-th-borders: var(--appkit-color-border) !important;
-  --tw-prose-td-borders: var(--appkit-color-border) !important;
-}
-
-/* Only the values that are genuinely theme-specific. Everything above already
- * inverts, because `--appkit-color-text`/`-text-muted`/`-border` are redefined
- * per theme in tokens.css — which is the whole point of binding to them. */
-:root.dark .prose {
-  --tw-prose-links: var(--appkit-color-secondary-400) !important;
-  --tw-prose-kbd-shadows: 250 250 250 !important;
-  --tw-prose-pre-bg: var(--appkit-color-surface) !important;
-}
 
 /* --------------------------------------------------------------------------
  * Base wrapper. All selectors are scoped to .appkit-rich-text so they
@@ -200,27 +165,31 @@
 }
 
 /* --- Links ---------------------------------------------------------------- */
+/* No `.dark` variant, deliberately: `--appkit-color-link` is redefined per
+ * theme, so one rule covers every theme including admin-authored ones. The two
+ * `.dark .appkit-rich-text a` rules that used to sit here were also dead —
+ * non-important against the plugin's `.prose :where(a){color:…!important}`.
+ *
+ * Decoration binds to `currentColor` rather than naming the token a second
+ * time. That matters beyond brevity: the colour here IS still overridden by
+ * the plugin on any element that also carries `.prose`, so a hardcoded
+ * decoration colour could disagree with the ink actually rendered. With
+ * `currentColor` the underline follows whatever won. */
 .appkit-rich-text a {
-  color: var(--appkit-color-primary-600);
+  color: var(--appkit-color-link);
   text-decoration: underline;
-  text-decoration-color: color-mix(in srgb, var(--appkit-color-primary-600) 60%, transparent);
+  text-decoration-color: color-mix(in srgb, currentColor 60%, transparent);
   text-underline-offset: 2px;
   transition: color 150ms, text-decoration-color 150ms;
 }
 
+/* Hover moves the link toward the page's own text colour, which darkens it in
+ * a light theme and lightens it in a dark one — so this needs no per-theme
+ * pair either. The plugin sets no `a:hover`, so unlike the resting colour
+ * above this rule is genuinely the one in effect. */
 .appkit-rich-text a:hover {
-  color: var(--appkit-color-primary-700);
-  text-decoration-color: color-mix(in srgb, var(--appkit-color-primary-700) 70%, transparent);
-}
-
-.dark .appkit-rich-text a {
-  color: var(--appkit-color-secondary-400);
-  text-decoration-color: color-mix(in srgb, var(--appkit-color-secondary-400) 60%, transparent);
-}
-
-.dark .appkit-rich-text a:hover {
-  color: var(--appkit-color-secondary-300);
-  text-decoration-color: color-mix(in srgb, var(--appkit-color-secondary-300) 60%, transparent);
+  color: color-mix(in srgb, var(--appkit-color-link) 80%, var(--appkit-color-text));
+  text-decoration-color: currentColor;
 }
 
 /* --- Tables --------------------------------------------------------------- */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "4.62.0",
+  "version": "4.62.1",
   "license": "MIT",
   "publishConfig": {
     "access": "public"