@mohasinac/appkit 4.55.0-next.0 → 4.56.0

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

@@ -2,10 +2,8 @@ import { DEFAULT_DARK_THEME } from "./default-dark";
 import { DEFAULT_LIGHT_THEME } from "./default-light";
 import { COBALT_NIGHT_THEME } from "./cobalt-night";
 import { SUNSET_THEME } from "./sunset";
-import { TECHNICAL_DARK_THEME } from "./technical-dark";
-import { TECHNICAL_LIGHT_THEME } from "./technical-light";
 import type { ThemeMode, ThemeRecord } from "./types";
-export { DEFAULT_LIGHT_THEME, DEFAULT_DARK_THEME, COBALT_NIGHT_THEME, SUNSET_THEME, TECHNICAL_DARK_THEME, TECHNICAL_LIGHT_THEME, };
+export { DEFAULT_LIGHT_THEME, DEFAULT_DARK_THEME, COBALT_NIGHT_THEME, SUNSET_THEME };
 export { REQUIRED_GRADIENT_KEYS, REQUIRED_THEME_TOKENS } from "./required";
 export type { RequiredThemeToken } from "./required";
 export type { GradientKey, ThemeMode, ThemeRecord } from "./types";

package/dist/tokens/themes/index.js

@@ -2,9 +2,7 @@ import { DEFAULT_DARK_THEME } from "./default-dark.js";
 import { DEFAULT_LIGHT_THEME } from "./default-light.js";
 import { COBALT_NIGHT_THEME } from "./cobalt-night.js";
 import { SUNSET_THEME } from "./sunset.js";
-import { TECHNICAL_DARK_THEME } from "./technical-dark.js";
-import { TECHNICAL_LIGHT_THEME } from "./technical-light.js";
-export { DEFAULT_LIGHT_THEME, DEFAULT_DARK_THEME, COBALT_NIGHT_THEME, SUNSET_THEME, TECHNICAL_DARK_THEME, TECHNICAL_LIGHT_THEME, };
+export { DEFAULT_LIGHT_THEME, DEFAULT_DARK_THEME, COBALT_NIGHT_THEME, SUNSET_THEME };
 export { REQUIRED_GRADIENT_KEYS, REQUIRED_THEME_TOKENS } from "./required.js";
 /** Built-in themes that ship with appkit; admin cannot delete these. */
 export const BUILT_IN_THEMES = [
@@ -19,14 +17,6 @@ export const BUILT_IN_THEMES = [
 export const THEME_TEMPLATES = [
     COBALT_NIGHT_THEME,
     SUNSET_THEME,
-    /*
-     * Technical Dark / Light — a developer-tool identity: graphite surfaces,
-     * hairline borders, a mono-forward type stack and syntax-palette accents
-     * reused semantically (difficulty badges, submission verdicts, status chips).
-     * Shipped as a matched PAIR so switching mode does not change identity.
-     */
-    TECHNICAL_DARK_THEME,
-    TECHNICAL_LIGHT_THEME,
 ];
 /**
  * Find the default built-in theme for a given mode.

package/dist/tokens/tokens.css

@@ -632,161 +632,6 @@
   --appkit-shadow-glow-pink:       0 0 0 1px rgba(244,63,94,0.18), 0 4px 20px -4px rgba(244,63,94,0.30);
 }
 
-/* --- Theme — Technical Dark ([data-theme="technical-dark"]) --------------- */
-/* Developer-tool identity: graphite surfaces, hairline borders, a mono-forward
-   type stack, and accents from a syntax palette (keyword violet, string green,
-   number amber, error red) reused semantically for difficulty badges,
-   submission verdicts and status chips.
-
-   Mirrors src/tokens/themes/technical-dark.ts — values must stay identical or
-   the first paint disagrees with the hydrated theme.
-
-   Contrast on --appkit-color-bg (#0b0d10), measured: text 15.82:1,
-   muted 7.72:1, faint 4.68:1, primary 6.53:1, lowest status 7.01:1. */
-[data-theme="technical-dark"] {
-  --appkit-color-primary:          #7c8cff;
-  --appkit-color-primary-50:       #eef0ff;
-  --appkit-color-primary-100:      #e0e4ff;
-  --appkit-color-primary-200:      #c7cdff;
-  --appkit-color-primary-300:      #a5aeff;
-  --appkit-color-primary-400:      #8e99ff;
-  --appkit-color-primary-500:      #7c8cff;
-  --appkit-color-primary-600:      #5a68e8;
-  --appkit-color-primary-700:      #4650c4;
-  --appkit-color-primary-800:      #373f9c;
-  --appkit-color-primary-900:      #2b317a;
-  --appkit-color-primary-950:      #171a45;
-
-  --appkit-color-secondary:        #56d39a;
-  --appkit-color-secondary-50:     #ecfdf5;
-  --appkit-color-secondary-100:    #d1fae5;
-  --appkit-color-secondary-200:    #a7f3d0;
-  --appkit-color-secondary-300:    #7ee7b8;
-  --appkit-color-secondary-400:    #56d39a;
-  --appkit-color-secondary-500:    #34b87d;
-  --appkit-color-secondary-600:    #1f9664;
-  --appkit-color-secondary-700:    #187752;
-  --appkit-color-secondary-800:    #155e42;
-  --appkit-color-secondary-900:    #124b36;
-  --appkit-color-secondary-950:    #062a1d;
-
-  --appkit-color-bg:               #0b0d10;
-  --appkit-color-surface:          #13161b;
-  --appkit-color-surface-elevated: rgba(19, 22, 27, 0.92);
-  --appkit-color-surface-input:    rgba(27, 31, 38, 0.7);
-
-  --appkit-color-surface-hover:    rgba(148, 163, 184, 0.1);
-  --appkit-color-surface-raised:   rgba(27, 31, 38, 0.8);
-  --appkit-color-primary-surface:  rgba(124, 140, 255, 0.16);
-
-  --appkit-color-border:           #242a33;
-  --appkit-color-border-subtle:    rgba(36, 42, 51, 0.6);
-
-  --appkit-color-text:             #e4e8ee;
-  --appkit-color-text-muted:       #9aa4b2;
-  --appkit-color-text-faint:       #747d8c;
-  /* Dark ink on the violet fill: 6.53:1, where white measures 2.98:1 and
-     fails. Declared here AND in the TS record or first paint disagrees. */
-  --appkit-color-text-on-primary:  #0b0d10;
-
-  --appkit-color-success:          #4ade80;
-  --appkit-color-success-surface:  rgba(22, 101, 68, 0.22);
-  --appkit-color-warning:          #f2b544;
-  --appkit-color-warning-surface:  rgba(120, 78, 10, 0.22);
-  --appkit-color-error:            #ff6b6b;
-  --appkit-color-error-surface:    rgba(140, 30, 30, 0.22);
-  --appkit-color-info:             #58b4ff;
-  --appkit-color-info-surface:     rgba(12, 74, 110, 0.22);
-
-  /* Amber, deliberately not a status or brand hue — a focus ring that doubles
-     as an error colour is unreadable on an invalid field. */
-  --appkit-color-focus-ring:       #ffb86b;
-  --appkit-shadow-glow:            0 0 0 1px rgba(124,140,255,0.14), 0 4px 16px -6px rgba(124,140,255,0.2);
-  --appkit-shadow-glow-pink:       0 0 0 1px rgba(86,211,154,0.14), 0 4px 18px -6px rgba(86,211,154,0.22);
-
-  /* Mono-forward: display/sans are monospace for headings, labels, IDs and
-     tables; editorial carries the reading face for long lesson prose. */
-  --appkit-font-display:           var(--font-mono), "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
-  --appkit-font-sans:              var(--font-mono), "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
-  --appkit-font-editorial:         var(--font-body), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --appkit-font-mono:              var(--font-mono), "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
-}
-
-/* --- Theme — Technical Light ([data-theme="technical-light"]) ------------- */
-/* The matched light counterpart. Every accent is RE-DARKENED rather than
-   reused: the dark preset's #7c8cff measures 2.88:1 on this ground and fails
-   AA, and its #ffb86b focus ring measures 1.65:1 — an invisible focus ring is
-   a keyboard trap.
-
-   Mirrors src/tokens/themes/technical-light.ts.
-
-   Contrast on --appkit-color-bg (#fbfbfa), measured: text 17.15:1,
-   muted 5.84:1, faint 4.67:1, primary 5.38:1, lowest status 4.80:1. */
-[data-theme="technical-light"] {
-  --appkit-color-primary:          #4b5bd6;
-  --appkit-color-primary-50:       #eef0ff;
-  --appkit-color-primary-100:      #e0e4ff;
-  --appkit-color-primary-200:      #c7cdff;
-  --appkit-color-primary-300:      #a5aeff;
-  --appkit-color-primary-400:      #7c8cff;
-  --appkit-color-primary-500:      #5a68e8;
-  --appkit-color-primary-600:      #4b5bd6;
-  --appkit-color-primary-700:      #3b45ad;
-  --appkit-color-primary-800:      #2f3789;
-  --appkit-color-primary-900:      #262c6d;
-  --appkit-color-primary-950:      #151840;
-
-  --appkit-color-secondary:        #0f8f5f;
-  --appkit-color-secondary-50:     #ecfdf5;
-  --appkit-color-secondary-100:    #d1fae5;
-  --appkit-color-secondary-200:    #a7f3d0;
-  --appkit-color-secondary-300:    #6ee7b7;
-  --appkit-color-secondary-400:    #34b87d;
-  --appkit-color-secondary-500:    #0f8f5f;
-  --appkit-color-secondary-600:    #0c744d;
-  --appkit-color-secondary-700:    #0a5c3d;
-  --appkit-color-secondary-800:    #084830;
-  --appkit-color-secondary-900:    #063a27;
-  --appkit-color-secondary-950:    #032016;
-
-  --appkit-color-bg:               #fbfbfa;
-  --appkit-color-surface:          #ffffff;
-  --appkit-color-surface-elevated: rgba(255, 255, 255, 0.96);
-  --appkit-color-surface-input:    rgba(244, 244, 242, 0.8);
-
-  --appkit-color-surface-hover:    rgba(22, 24, 29, 0.05);
-  --appkit-color-surface-raised:   rgba(244, 244, 242, 0.9);
-  --appkit-color-primary-surface:  rgba(75, 91, 214, 0.1);
-
-  --appkit-color-border:           #e2e2df;
-  --appkit-color-border-subtle:    rgba(226, 226, 223, 0.7);
-
-  --appkit-color-text:             #16181d;
-  --appkit-color-text-muted:       #5c6370;
-  /* #767d89 measured 4.00:1 — AA for large text only. Darkened to clear AA
-     at body size. */
-  --appkit-color-text-faint:       #6b7280;
-  --appkit-color-text-on-primary:  #ffffff;
-
-  --appkit-color-success:          #13804f;
-  --appkit-color-success-surface:  rgba(19, 128, 79, 0.1);
-  --appkit-color-warning:          #9a6400;
-  --appkit-color-warning-surface:  rgba(154, 100, 0, 0.1);
-  --appkit-color-error:            #c62828;
-  --appkit-color-error-surface:    rgba(198, 40, 40, 0.1);
-  --appkit-color-info:             #0a69b5;
-  --appkit-color-info-surface:     rgba(10, 105, 181, 0.1);
-
-  --appkit-color-focus-ring:       #b45a00;
-  --appkit-shadow-glow:            0 0 0 1px rgba(75,91,214,0.14), 0 4px 16px -6px rgba(75,91,214,0.18);
-  --appkit-shadow-glow-pink:       0 0 0 1px rgba(15,143,95,0.14), 0 4px 18px -6px rgba(15,143,95,0.2);
-
-  --appkit-font-display:           var(--font-mono), "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
-  --appkit-font-sans:              var(--font-mono), "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
-  --appkit-font-editorial:         var(--font-body), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
-  --appkit-font-mono:              var(--font-mono), "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
-}
-
 /* --- Typography ----------------------------------------------------------- */
 :root {
   --appkit-font-sans:      var(--font-body), ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

package/dist/ui/components/GatedPrice.style.css

@@ -1,43 +1,43 @@
-/**
- * Sign-in gate for money amounts on public listing surfaces.
- *
- * The pending state must occupy the SAME vertical space as a rendered price, or
- * every card in a grid reflows once the session resolves. It is deliberately a
- * silent placeholder rather than a shimmer: the wait is short, and an animated
- * skeleton on 24 cards reads as a page that failed to load.
- */
-.appkit-gated-price__pending {
-  display: inline-block;
-  min-width: 5rem;
-  height: 1.25rem;
-  border-radius: 0.25rem;
-  /* 🛑 `--appkit-color-surface-muted` is NOT a token — 15 uses, 0 definitions,
-     and `audit-undefined-css-vars` ratchets it down. An undefined custom
-     property with no fallback makes the whole declaration invalid, so this
-     placeholder had no background at all and the grid still reflowed on
-     resolve, which is the one job it has. */
-  background: var(--appkit-color-surface-input);
-}
-
-.appkit-gated-price__prompt {
-  display: inline-flex;
-  align-items: center;
-  /*
-   * The eye is a 2rem IconButton while `__pending` above is a 1.25rem price
-   * line, so a GUEST's row grows by 0.75rem once the session resolves. That is
-   * deliberate and is the lesser of the two: the alternative is making
-   * `__pending` 2rem, which shifts the row for SIGNED-IN users — the ones who
-   * end up looking at real content. The guest shift happens once per load and
-   * applies to every card identically, so the grid moves as one rather than
-   * going ragged.
-   */
-  line-height: 1.25rem;
-}
-
-/*
- * 🛑 The eye itself has NO rules here, on purpose. It is an `<IconButton
- * size="sm" variant="outline">`, so its box, ink, hover and focus ring all
- * come from the design system — a second, private set of button styles for
- * one control is exactly how a UI ends up with two kinds of icon button that
- * drift apart. This wrapper only has to keep the row's height stable.
- */
+/**
+ * Sign-in gate for money amounts on public listing surfaces.
+ *
+ * The pending state must occupy the SAME vertical space as a rendered price, or
+ * every card in a grid reflows once the session resolves. It is deliberately a
+ * silent placeholder rather than a shimmer: the wait is short, and an animated
+ * skeleton on 24 cards reads as a page that failed to load.
+ */
+.appkit-gated-price__pending {
+  display: inline-block;
+  min-width: 5rem;
+  height: 1.25rem;
+  border-radius: 0.25rem;
+  /* 🛑 `--appkit-color-surface-muted` is NOT a token — 15 uses, 0 definitions,
+     and `audit-undefined-css-vars` ratchets it down. An undefined custom
+     property with no fallback makes the whole declaration invalid, so this
+     placeholder had no background at all and the grid still reflowed on
+     resolve, which is the one job it has. */
+  background: var(--appkit-color-surface-input);
+}
+
+.appkit-gated-price__prompt {
+  display: inline-flex;
+  align-items: center;
+  /*
+   * The eye is a 2rem IconButton while `__pending` above is a 1.25rem price
+   * line, so a GUEST's row grows by 0.75rem once the session resolves. That is
+   * deliberate and is the lesser of the two: the alternative is making
+   * `__pending` 2rem, which shifts the row for SIGNED-IN users — the ones who
+   * end up looking at real content. The guest shift happens once per load and
+   * applies to every card identically, so the grid moves as one rather than
+   * going ragged.
+   */
+  line-height: 1.25rem;
+}
+
+/*
+ * 🛑 The eye itself has NO rules here, on purpose. It is an `<IconButton
+ * size="sm" variant="outline">`, so its box, ink, hover and focus ring all
+ * come from the design system — a second, private set of button styles for
+ * one control is exactly how a UI ends up with two kinds of icon button that
+ * drift apart. This wrapper only has to keep the row's height stable.
+ */

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

@@ -13,6 +13,22 @@ export interface ImageMosaicProps {
     alt: string;
     /** Height preset. Defaults to `"band"`, the original behaviour. */
     size?: ImageMosaicSize;
+    /**
+     * Replaces the large cell's image with arbitrary content — the homepage
+     * hero's brand panel is the only caller.
+     *
+     * 🛑 It changes what `images` MEANS, which is the whole reason it is a
+     * separate prop rather than a `images[0]`-shaped special case: without a
+     * slot the first image takes the large cell, with one EVERY image goes to
+     * the small column. A caller that passes both a slot and three images gets
+     * three small tiles, not two.
+     *
+     * `MOSAIC_MIN` is also not applied in this mode. The minimum exists because
+     * fewer than three images is not an arrangement — but a slot is content in
+     * its own right, so one image beside it is still a composition, and zero
+     * images collapses to the slot alone at full width.
+     */
+    leadSlot?: React.ReactNode;
     className?: string;
 }
 /**
@@ -47,4 +63,4 @@ export interface ImageMosaicProps {
  * breaks SSR/hydration agreement and makes the page feel unstable — and it is
  * the shape Root Cause #25 is about on the seed side.
  */
-export declare function ImageMosaic({ images, alt, size, className }: ImageMosaicProps): React.JSX.Element | null;
+export declare function ImageMosaic({ images, alt, size, leadSlot, className }: ImageMosaicProps): React.JSX.Element | null;

package/dist/ui/components/ImageMosaic.js

@@ -37,11 +37,34 @@ export const MOSAIC_MIN = 3;
  * breaks SSR/hydration agreement and makes the page feel unstable — and it is
  * the shape Root Cause #25 is about on the seed side.
  */
-export function ImageMosaic({ images, alt, size = "band", className }) {
-    const tiles = images.filter(Boolean).slice(0, MOSAIC_MAX);
-    if (tiles.length < MOSAIC_MIN)
+export function ImageMosaic({ images, alt, size = "band", leadSlot, className }) {
+    // With a slot the large cell is already spoken for, so the whole budget
+    // belongs to the small column — one fewer tile than the image-led shape.
+    const tiles = images.filter(Boolean).slice(0, leadSlot ? MOSAIC_MAX - 1 : MOSAIC_MAX);
+    if (!leadSlot && tiles.length < MOSAIC_MIN)
         return null;
-    const [lead, ...rest] = tiles;
+    const [lead, ...rest] = leadSlot ? [undefined, ...tiles] : tiles;
     const sizeClass = size === "hero" ? "appkit-image-mosaic--hero" : "";
-    return (_jsxs(Div, { className: `appkit-image-mosaic ${sizeClass} ${className ?? ""}`, role: "img", "aria-label": alt, children: [_jsx(Div, { className: "appkit-image-mosaic__lead", children: _jsx(MediaImage, { src: lead, alt: "", size: "card" }) }), _jsx(Div, { className: "appkit-image-mosaic__rest", children: rest.map((src, i) => (_jsx(Div, { className: "appkit-image-mosaic__tile", children: _jsx(MediaImage, { src: src, alt: "", size: "thumbnail" }) }, `${src}-${i}`))) })] }));
+    // Nothing to put in the small column — the 1fr track would otherwise render
+    // as an empty gutter beside the slot, which reads as a failed image load
+    // rather than as a deliberate panel.
+    const soloClass = leadSlot && rest.length === 0 ? "appkit-image-mosaic--solo" : "";
+    /*
+     * 🛑 WHERE `role="img"` GOES DEPENDS ON THE SLOT, and getting this wrong is
+     * silent.
+     *
+     * `role="img"` collapses its entire subtree into ONE node named by
+     * `aria-label` — that is exactly right for a group of decorative thumbnails
+     * (point 1 in the header: one alt describing the subject, not five
+     * filenames). Leave it on the grid in `leadSlot` mode and it also swallows
+     * the slot, so the hero's logo and its "Let It Rip India" caption would
+     * reach a screen reader as "…collection highlights" and nothing else — real
+     * content erased by a label meant for the pictures beside it.
+     *
+     * So in slot mode the role moves down to the image group, where it belongs,
+     * and the slot stays ordinary DOM. The no-slot path is byte-identical to
+     * what it always was.
+     */
+    const imageGroupA11y = { role: "img", "aria-label": alt };
+    return (_jsxs(Div, { className: `appkit-image-mosaic ${sizeClass} ${soloClass} ${className ?? ""}`, ...(leadSlot ? {} : imageGroupA11y), children: [_jsx(Div, { className: "appkit-image-mosaic__lead", children: leadSlot ?? _jsx(MediaImage, { src: lead, alt: "", size: "card" }) }), rest.length > 0 && (_jsx(Div, { className: "appkit-image-mosaic__rest", ...(leadSlot ? imageGroupA11y : {}), children: rest.map((src, i) => (_jsx(Div, { className: "appkit-image-mosaic__tile", children: _jsx(MediaImage, { src: src, alt: "", size: "thumbnail" }) }, `${src}-${i}`))) }))] }));
 }

package/dist/ui/components/ImageMosaic.style.css

@@ -7,10 +7,19 @@
  * around as a visitor moves through the tree. A fixed height per breakpoint is
  * the one shape that keeps the hero stable.
  *
- * 🛑 `overflow: hidden` on the grid and `object-fit: cover` on the images, so a
- * portrait product photo cannot stretch the band. Every image here is a
- * thumbnail of unknown aspect ratio; cropping is the only option that does not
- * distort the subject.
+ * 🛑 `overflow: hidden` on the grid, and the images are CONTAINED rather than
+ * cropped. This block used to say the opposite — "cropping is the only option
+ * that does not distort the subject" — and `object-fit: cover` was declared
+ * here. Both are gone: `MediaImage` now defaults to `contain` app-wide, which
+ * it applies as a Tailwind utility, and both Tailwind configs set
+ * `important: true` — so a plain `object-fit: cover` declaration here could
+ * never have won anyway. It would have been a rule that reads as the
+ * governing decision while changing nothing (Root Cause #106).
+ *
+ * The trade is real and is the one that was asked for: a 4:3 publisher shot in
+ * a square tile now letterboxes against `--appkit-color-surface` instead of
+ * having its edges cut off. Most of this catalogue's imagery is product-on-
+ * white, where a crop removes the product and `contain` does not.
  */
 .appkit-image-mosaic {
   display: grid;
@@ -49,6 +58,16 @@
   }
 }
 
+/*
+ * `--solo` — a `leadSlot` with no images beside it.
+ *
+ * One column, not `2fr 1fr`. The small track has nothing to hold, and an empty
+ * 1fr gutter beside a brand panel reads as four images that failed to load.
+ */
+.appkit-image-mosaic--solo {
+  grid-template-columns: 1fr;
+}
+
 .appkit-image-mosaic__lead,
 .appkit-image-mosaic__tile {
   position: relative;
@@ -61,7 +80,20 @@
 .appkit-image-mosaic__tile img {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+}
+
+/*
+ * Breathing room INSIDE the tile, so a contained image stops short of the
+ * rounded corners instead of touching them. On `cover` this was unnecessary —
+ * the crop ran to the edge by definition — which is why it arrives with the
+ * fit change rather than before it.
+ */
+.appkit-image-mosaic__lead img {
+  padding: var(--appkit-space-3);
+}
+
+.appkit-image-mosaic__tile img {
+  padding: var(--appkit-space-2);
 }
 
 .appkit-image-mosaic__rest {

package/dist/ui/components/QuickCreateModal.style.css

@@ -1,78 +1,78 @@
-.appkit-quick-create-modal {
-  position: fixed;
-  inset: 0;
-  z-index: var(--appkit-z-modal, 1000);
-  display: flex;
-  align-items: stretch;
-  justify-content: center;
-}
-
-.appkit-quick-create-modal__backdrop {
-  position: absolute;
-  inset: 0;
-  background: rgb(0 0 0 / 0.45);
-}
-
-.appkit-quick-create-modal__panel {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  background: var(--appkit-color-surface, #ffffff);
-  color: var(--appkit-color-foreground, inherit);
-  width: 100%;
-  max-width: 560px;
-  margin: auto;
-  max-height: 92vh;
-  border-radius: 0.75rem;
-  box-shadow: var(--appkit-shadow-lg, 0 20px 40px rgb(0 0 0 / 0.25));
-  outline: none;
-}
-
-.appkit-quick-create-modal__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 1.25rem;
-  border-bottom: 1px solid var(--appkit-color-border, rgb(0 0 0 / 0.1));
-}
-
-.appkit-quick-create-modal__title {
-  margin: 0;
-  font-size: 1.125rem;
-  font-weight: 600;
-}
-
-.appkit-quick-create-modal__body {
-  flex: 1 1 auto;
-  overflow-y: auto;
-  padding: 1.25rem;
-}
-
-/* Chrome only — layout comes from ActionRow. Re-adding `display: flex` or
-   `justify-content` here would fight the row this class now decorates. */
-.appkit-quick-create-modal__footer {
-  padding: 1rem 1.25rem;
-  border-top: 1px solid var(--appkit-color-border, rgb(0 0 0 / 0.1));
-}
-
-.appkit-quick-create-modal__full-link {
-  font-size: 0.875rem;
-  color: var(--appkit-color-primary, #6366f1);
-  text-decoration: underline;
-}
-
-@media (max-width: 640px) {
-  .appkit-quick-create-modal {
-    align-items: flex-end;
-  }
-  .appkit-quick-create-modal__panel {
-    max-width: 100%;
-    margin: 0;
-    border-radius: 0.75rem 0.75rem 0 0;
-    max-height: 92vh;
-  }
-}
-
-[data-theme="default-dark"] .appkit-quick-create-modal__panel {
-  background: var(--appkit-color-surface-dark, #1e293b);
-}
+.appkit-quick-create-modal {
+  position: fixed;
+  inset: 0;
+  z-index: var(--appkit-z-modal, 1000);
+  display: flex;
+  align-items: stretch;
+  justify-content: center;
+}
+
+.appkit-quick-create-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgb(0 0 0 / 0.45);
+}
+
+.appkit-quick-create-modal__panel {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--appkit-color-surface, #ffffff);
+  color: var(--appkit-color-foreground, inherit);
+  width: 100%;
+  max-width: 560px;
+  margin: auto;
+  max-height: 92vh;
+  border-radius: 0.75rem;
+  box-shadow: var(--appkit-shadow-lg, 0 20px 40px rgb(0 0 0 / 0.25));
+  outline: none;
+}
+
+.appkit-quick-create-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--appkit-color-border, rgb(0 0 0 / 0.1));
+}
+
+.appkit-quick-create-modal__title {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.appkit-quick-create-modal__body {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 1.25rem;
+}
+
+/* Chrome only — layout comes from ActionRow. Re-adding `display: flex` or
+   `justify-content` here would fight the row this class now decorates. */
+.appkit-quick-create-modal__footer {
+  padding: 1rem 1.25rem;
+  border-top: 1px solid var(--appkit-color-border, rgb(0 0 0 / 0.1));
+}
+
+.appkit-quick-create-modal__full-link {
+  font-size: 0.875rem;
+  color: var(--appkit-color-primary, #6366f1);
+  text-decoration: underline;
+}
+
+@media (max-width: 640px) {
+  .appkit-quick-create-modal {
+    align-items: flex-end;
+  }
+  .appkit-quick-create-modal__panel {
+    max-width: 100%;
+    margin: 0;
+    border-radius: 0.75rem 0.75rem 0 0;
+    max-height: 92vh;
+  }
+}
+
+[data-theme="default-dark"] .appkit-quick-create-modal__panel {
+  background: var(--appkit-color-surface-dark, #1e293b);
+}