@particle-academy/react-fancy 5.51.2 → 5.53.0

package/dist/{chunk-CF2U25LM.js → chunk-2XO6EYZ7.js}

@@ -1,5 +1,5 @@
-import { Text } from './chunk-5RLP77KK.js';
-import { Heading } from './chunk-CESGP5AF.js';
+import { Text } from './chunk-XM3V3RSU.js';
+import { Heading } from './chunk-QPM4CZ4G.js';
 import { cn } from './chunk-MMW2JGKZ.js';
 import { createContext, forwardRef, useMemo, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -118,14 +118,14 @@ var CardSection = forwardRef(
         className: cn(
           standalone && selfPadding[padding],
           banded && "bg-zinc-50 dark:bg-zinc-800/50",
-          ruled && !dividerInset && (edge === "bottom" ? "border-b border-zinc-200 dark:border-zinc-700" : "border-t border-zinc-200 dark:border-zinc-700"),
+          ruled && !dividerInset && (edge === "bottom" ? "border-b border-[color:var(--fancy-border,var(--color-zinc-200))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]" : "border-t border-[color:var(--fancy-border,var(--color-zinc-200))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]"),
           // An inset rule cannot be a border: a border draws on the element's
           // own edge, and the whole point is to stop short of it. So it is a
           // one-pixel pseudo-element, inset by the same step the padding uses —
           // which is why both come out of one table in Card.scales.
           ruled && dividerInset && cn(
             "relative",
-            edge === "bottom" ? "after:absolute after:bottom-0 after:h-px after:bg-zinc-200 dark:after:bg-zinc-700" : "before:absolute before:top-0 before:h-px before:bg-zinc-200 dark:before:bg-zinc-700",
+            edge === "bottom" ? "after:absolute after:bottom-0 after:h-px after:bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:after:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]" : "before:absolute before:top-0 before:h-px before:bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:before:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]",
             edge === "bottom" ? dividerInsetAfter[padding] : dividerInsetBefore[padding]
           ),
           hasComposition && "flex items-center gap-3",
@@ -318,7 +318,7 @@ var CardBleed = forwardRef(
 );
 CardBleed.displayName = "CardBleed";
 var variantClasses = {
-  outlined: "border border-zinc-200 dark:border-zinc-700",
+  outlined: "border border-[color:var(--fancy-border,var(--color-zinc-200))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]",
   elevated: "shadow-md border border-zinc-100 dark:border-zinc-800",
   flat: "bg-zinc-50 dark:bg-zinc-800/50",
   // Tint steps between "no tint" and `flat`. They work the same way `flat`
@@ -326,7 +326,7 @@ var variantClasses = {
   // `cn` is tailwind-merge and resolves conflicting utilities last-wins. Class
   // ORDER decides this, not CSS specificity — so these must stay after the base
   // background in the `cn(...)` call below.
-  muted: "bg-zinc-100 dark:bg-zinc-800",
+  muted: "bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]",
   soft: "bg-zinc-50/70 dark:bg-zinc-800/40"
 };
 var CardRoot = forwardRef(
@@ -353,7 +353,7 @@ var CardRoot = forwardRef(
         ref,
         "data-react-fancy-card": "",
         className: cn(
-          "bg-white dark:bg-zinc-900",
+          "bg-[color:var(--fancy-surface,var(--color-white))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]",
           radiusClasses[size],
           variantClasses[variant],
           // A pseudo-element rather than an inset box-shadow: `shadow-*` and
@@ -388,5 +388,5 @@ var Card = Object.assign(CardRoot, {
 });
 
 export { Card, CardBleed, CardBody, CardFooter, CardHeader, CardMedia };
-//# sourceMappingURL=chunk-CF2U25LM.js.map
-//# sourceMappingURL=chunk-CF2U25LM.js.map
+//# sourceMappingURL=chunk-2XO6EYZ7.js.map
+//# sourceMappingURL=chunk-2XO6EYZ7.js.map

package/dist/chunk-2XO6EYZ7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Card/Card.context.ts","../src/components/Card/Card.scales.ts","../src/components/Card/CardSection.tsx","../src/components/Card/CardHeader.tsx","../src/components/Card/CardBody.tsx","../src/components/Card/CardFooter.tsx","../src/components/Card/CardMedia.tsx","../src/components/Card/CardBleed.tsx","../src/components/Card/Card.tsx"],"names":["forwardRef","jsx","jsxs"],"mappings":"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","file":"chunk-2XO6EYZ7.js","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { CardContextValue, CardPadding } from \"./Card.types\";\n\n/**\n * What a Card tells its parts.\n *\n * `null` is a SUPPORTED state, not an error — unlike `useAccordion`, which\n * throws. `Card.Header` and `Card.Footer` are usable on their own, as a section\n * heading above a card, and before this existed they rendered with a\n * `border-bottom` belonging to a card they were not inside. So the absence of a\n * card is information: it means \"style yourself standalone\", and it is why this\n * hook returns the value rather than asserting it.\n */\nexport const CardContext = createContext<CardContextValue | null>(null);\n\nexport function useCardContext(): CardContextValue | null {\n  return useContext(CardContext);\n}\n\n/**\n * The padding step of the section a child sits inside, or `null` when there is\n * no padded section above it.\n *\n * `Card.Bleed` needs it because escaping the padding is two different\n * operations depending on depth, and a component cannot see its own depth:\n *\n *   - Bleed inside a Header/Body/Footer is a GRANDchild of the card — the\n *     padding is on that section, and reaching the card's edge means a negative\n *     margin.\n *   - Bleed as a direct child of the card IS the padded element — the padding\n *     is on Bleed itself, and reaching the edge means zeroing it. A negative\n *     margin here would pull the content outside the card entirely.\n *\n * Both look like \"cancel the padding\" and neither works for the other case,\n * which is exactly the kind of thing that ships looking fine in one demo.\n *\n * It carries the STEP rather than a boolean because the step is the only thing\n * the bleed actually needs, and it is NOT always derivable from the card's\n * `size`: `<Card size=\"md\" padding=\"lg\">` pads its children by `lg`, and a\n * standalone `Card.Header` has a card-less step of its own. A boolean sent the\n * bleed back to `size` for the distance, which was wrong in both of those\n * cases — by a whole padding step, silently.\n */\nexport const CardSectionContext = createContext<CardPadding | null>(null);\n\nexport function useCardSectionPadding(): CardPadding | null {\n  return useContext(CardSectionContext);\n}\n","import type { CardPadding, CardSize } from \"./Card.types\";\n\n/**\n * One table per thing a `size` or a `padding` step scales.\n *\n * They live together, and apart from the components, because four of them have\n * to agree: the card's own radius, `Card.Media`'s top radius, the inset a\n * `dividerInset` rule stops at, and the negative margin a `Card.Bleed` uses to\n * escape. Those last three are all derived from the PADDING step — get one\n * wrong and the mismatch is a few pixels, which is the kind of defect that\n * survives review and then looks like a browser bug.\n *\n * Radius is keyed by `size`; everything that has to line up with the padding is\n * keyed by the padding step. Those are NOT the same key: `size` only picks the\n * DEFAULT padding, and an explicit `padding` prop overrides it. Keying the\n * inset and the bleed off `size` made `<Card size=\"md\" padding=\"lg\">` draw a\n * rule inset by 1rem over content inset by 1.5rem, and `padding=\"none\"` pull a\n * bleed clean outside the card.\n *\n * **`md` must stay byte-identical to what Card rendered before `size` existed**\n * (`rounded-lg`, `px-4`, `py-3`). `size` defaults to `md`, so that is what\n * makes this whole feature additive rather than a restyle of every consumer.\n */\n\nexport const paddingClasses: Record<CardPadding, string> = {\n  none: \"\",\n  xs: \"[&>*]:px-2 [&>*]:py-1.5\",\n  sm: \"[&>*]:px-3 [&>*]:py-2\",\n  md: \"[&>*]:px-4 [&>*]:py-3\",\n  lg: \"[&>*]:px-6 [&>*]:py-4\",\n};\n\n/** The padding step a `size` implies when `padding` is not given. */\nexport const sizePadding: Record<CardSize, CardPadding> = {\n  xs: \"xs\",\n  sm: \"sm\",\n  md: \"md\",\n  lg: \"lg\",\n};\n\nexport const radiusClasses: Record<CardSize, string> = {\n  xs: \"rounded\",\n  sm: \"rounded-md\",\n  md: \"rounded-lg\",\n  lg: \"rounded-xl\",\n};\n\n/** `rounded-t-*` / `rounded-b-*` counterparts, for media and bleed. */\nexport const radiusTop: Record<CardSize, string> = {\n  xs: \"rounded-t\",\n  sm: \"rounded-t-md\",\n  md: \"rounded-t-lg\",\n  lg: \"rounded-t-xl\",\n};\n\nexport const radiusBottom: Record<CardSize, string> = {\n  xs: \"rounded-b\",\n  sm: \"rounded-b-md\",\n  md: \"rounded-b-lg\",\n  lg: \"rounded-b-xl\",\n};\n\n/** Padding a STANDALONE header/footer applies to itself, having no card. */\nexport const selfPadding: Record<CardPadding, string> = {\n  none: \"\",\n  xs: \"px-2 py-1.5\",\n  sm: \"px-3 py-2\",\n  md: \"px-4 py-3\",\n  lg: \"px-6 py-4\",\n};\n\n/**\n * Where an inset divider stops — matches the horizontal padding step.\n *\n * Written out per variant rather than composed as `` `after:${insetX[step]}` ``.\n * **Tailwind generates CSS by scanning source for LITERAL class names**, so a\n * template string produces a class that exists in the DOM and in no stylesheet:\n * the divider silently does not render, and nothing in the build complains. The\n * duplication is the price of the scanner being a text search, and\n * `tests/card-tailwind.test.ts` compiles every one of these through Tailwind so\n * a typo cannot pass either.\n */\nexport const dividerInsetAfter: Record<CardPadding, string> = {\n  none: \"after:inset-x-0\",\n  xs: \"after:inset-x-2\",\n  sm: \"after:inset-x-3\",\n  md: \"after:inset-x-4\",\n  lg: \"after:inset-x-6\",\n};\n\nexport const dividerInsetBefore: Record<CardPadding, string> = {\n  none: \"before:inset-x-0\",\n  xs: \"before:inset-x-2\",\n  sm: \"before:inset-x-3\",\n  md: \"before:inset-x-4\",\n  lg: \"before:inset-x-6\",\n};\n\n/**\n * Negative margins a nested `Card.Bleed` uses to reach the card's edges.\n *\n * `none` is empty on purpose: with no padding to escape, a negative margin\n * would drag the content OUT of the card rather than to its edge.\n */\nexport const bleedX: Record<CardPadding, string> = {\n  none: \"\",\n  xs: \"-mx-2\",\n  sm: \"-mx-3\",\n  md: \"-mx-4\",\n  lg: \"-mx-6\",\n};\n\nexport const bleedTop: Record<CardPadding, string> = {\n  none: \"\",\n  xs: \"-mt-1.5\",\n  sm: \"-mt-2\",\n  md: \"-mt-3\",\n  lg: \"-mt-4\",\n};\n\nexport const bleedBottom: Record<CardPadding, string> = {\n  none: \"\",\n  xs: \"-mb-1.5\",\n  sm: \"-mb-2\",\n  md: \"-mb-3\",\n  lg: \"-mb-4\",\n};\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { Heading } from \"../Heading/Heading\";\nimport { Text } from \"../Text/Text\";\nimport { CardSectionContext, useCardContext } from \"./Card.context\";\nimport { dividerInsetAfter, dividerInsetBefore, selfPadding, sizePadding } from \"./Card.scales\";\nimport type { CardSectionProps } from \"./Card.types\";\n\n/**\n * The shared body of `Card.Header` and `Card.Footer`.\n *\n * They differ in exactly ONE way — which edge the rule sits on — so they are\n * one implementation with an `edge` argument rather than two files that have to\n * be kept in step. Composition, including where a lone `actions` block lands,\n * is identical in both. The previous pair had already drifted from\n * `ModalFooter`, which lays its actions out with `flex items-center\n * justify-end gap-3` while `Card.Footer` laid out nothing.\n */\nexport interface CardSectionInternalProps extends CardSectionProps {\n  edge: \"top\" | \"bottom\";\n  handle: string;\n}\n\nexport const CardSection = forwardRef<HTMLDivElement, CardSectionInternalProps>(\n  (\n    {\n      edge,\n      handle,\n      heading,\n      headingLevel = \"h3\",\n      description,\n      actions,\n      size: sizeProp,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const card = useCardContext();\n\n    // No card above us means this is a standalone section — a heading ABOVE a\n    // card, which Flux supports and we rendered wrongly: it kept the rule that\n    // belongs to a card it was not inside. Standalone also has to pad itself,\n    // because the padding normally comes from the card's `[&>*]` rule.\n    const standalone = card === null;\n    const size = card?.size ?? sizeProp ?? \"md\";\n    const sections = card?.sections ?? \"plain\";\n    const dividerInset = card?.dividerInset ?? false;\n\n    // The step the content is inset by, whoever applied it — the card's\n    // `[&>*]` rule, or this element's own padding when standalone. An inset\n    // rule has to stop exactly there, and a nested `Card.Bleed` has to travel\n    // exactly that far back out, so both read this one value.\n    const padding = card?.padding ?? sizePadding[size];\n\n    const ruled = sections === \"divided\";\n    const banded = sections === \"banded\";\n\n    // Children WIN. Rendering both would give anyone who passed each by mistake\n    // two titles, and silently ignoring children would be worse.\n    const composed = children ?? null;\n    const hasComposition = composed === null && (heading != null || description != null || actions != null);\n\n    return (\n      <div\n        ref={ref}\n        {...{ [handle]: \"\" }}\n        className={cn(\n          standalone && selfPadding[padding],\n          banded && \"bg-zinc-50 dark:bg-zinc-800/50\",\n          ruled &&\n            !dividerInset &&\n            (edge === \"bottom\"\n              ? \"border-b border-[color:var(--fancy-border,var(--color-zinc-200))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\"\n              : \"border-t border-[color:var(--fancy-border,var(--color-zinc-200))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\"),\n          // An inset rule cannot be a border: a border draws on the element's\n          // own edge, and the whole point is to stop short of it. So it is a\n          // one-pixel pseudo-element, inset by the same step the padding uses —\n          // which is why both come out of one table in Card.scales.\n          ruled &&\n            dividerInset &&\n            cn(\n              \"relative\",\n              edge === \"bottom\"\n                ? \"after:absolute after:bottom-0 after:h-px after:bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:after:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\"\n                : \"before:absolute before:top-0 before:h-px before:bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:before:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n              edge === \"bottom\"\n                ? dividerInsetAfter[padding]\n                : dividerInsetBefore[padding],\n            ),\n          hasComposition && \"flex items-center gap-3\",\n          hasComposition && (heading != null || description != null ? \"justify-between\" : \"justify-end\"),\n          className,\n        )}\n        {...props}\n      >\n        {/* Padding is on THIS element either way -- from the card's `[&>*]`\n            rule, or from `selfPadding` when standalone. A nested `Card.Bleed`\n            escapes it with a negative margin in both cases, so the step goes\n            down unconditionally; it used to be suppressed when standalone,\n            which left a bleed inside a card-less header doing nothing. */}\n        <CardSectionContext.Provider value={padding}>\n          {composed ?? (\n            <>\n              {(heading != null || description != null) && (\n                <div className=\"min-w-0\">\n                  {heading != null && (\n                    <Heading\n                      as={headingLevel}\n                      size=\"sm\"\n                      weight=\"semibold\"\n                      data-react-fancy-card-heading=\"\"\n                    >\n                      {heading}\n                    </Heading>\n                  )}\n                  {description != null && (\n                    <Text\n                      size=\"sm\"\n                      color=\"muted\"\n                      data-react-fancy-card-description=\"\"\n                    >\n                      {description}\n                    </Text>\n                  )}\n                </div>\n              )}\n              {actions != null && (\n                <div\n                  data-react-fancy-card-actions=\"\"\n                  className=\"flex shrink-0 items-center gap-2\"\n                >\n                  {actions}\n                </div>\n              )}\n            </>\n          )}\n        </CardSectionContext.Provider>\n      </div>\n    );\n  },\n);\n\nCardSection.displayName = \"CardSection\";\n","import { forwardRef } from \"react\";\nimport { CardSection } from \"./CardSection\";\nimport type { CardHeaderProps } from \"./Card.types\";\n\n/**\n * A card's header. Also usable on its own, as a section heading above a card —\n * see `CardSection`, which decides that from the absence of a `CardContext`.\n */\nexport const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(\n  (props, ref) => (\n    <CardSection\n      ref={ref}\n      edge=\"bottom\"\n      handle=\"data-react-fancy-card-header\"\n      {...props}\n    />\n  ),\n);\n\nCardHeader.displayName = \"CardHeader\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CardSectionContext, useCardContext } from \"./Card.context\";\nimport type { CardBodyProps } from \"./Card.types\";\n\nexport const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(\n  ({ className, children, ...props }, ref) => {\n    // The step the CARD pads this element by. `\"none\"` with no card above,\n    // because then nothing pads it and there is nothing for a nested\n    // `Card.Bleed` to escape.\n    const padding = useCardContext()?.padding ?? \"none\";\n\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-card-body=\"\"\n        className={cn(className)}\n        {...props}\n      >\n        {/*\n          Body carries no classes of its own -- the card pads it through\n          `[&>*]`, and giving it padding here would double that. The context is\n          the only thing it adds: it tells a nested `Card.Bleed` that the\n          padding to escape is on THIS element, and how much of it there is.\n        */}\n        <CardSectionContext.Provider value={padding}>{children}</CardSectionContext.Provider>\n      </div>\n    );\n  },\n);\n\nCardBody.displayName = \"CardBody\";\n","import { forwardRef } from \"react\";\nimport { CardSection } from \"./CardSection\";\nimport type { CardFooterProps } from \"./Card.types\";\n\n/**\n * A card's footer. Its rule sits on the TOP edge, and a lone `actions` block\n * aligns to the end — matching `ModalFooter`, which has always done that while\n * this component laid out nothing.\n */\nexport const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(\n  (props, ref) => (\n    <CardSection\n      ref={ref}\n      edge=\"top\"\n      handle=\"data-react-fancy-card-footer\"\n      {...props}\n    />\n  ),\n);\n\nCardFooter.displayName = \"CardFooter\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useCardContext } from \"./Card.context\";\nimport { radiusTop } from \"./Card.scales\";\nimport type { CardMediaProps } from \"./Card.types\";\n\n/**\n * The fixed-ratio media region at the top of a card: a thumbnail, gradient or\n * solid swatch, with slots pinned to its corners.\n *\n * This is `Card.Media` rather than a separate `<MediaCard>` because the thing\n * being asked for was never a different card — it was a card with a picture in\n * it. Four surfaces had each rebuilt exactly this (a gallery index, a package\n * grid, a starter-kit grid and a showcase grid) and one of them was already\n * wrapping `Card` and hand-rolling only this region.\n *\n * ## The `background` is not decoration\n *\n * It shows through while the image loads and stays visible if the image never\n * arrives. The gallery relied on that: each style card is keyed to a swatch, so\n * a missing screenshot degrades to the right colour rather than to a hole.\n */\nexport const CardMedia = forwardRef<HTMLDivElement, CardMediaProps>(\n  (\n    {\n      src,\n      alt = \"\",\n      ratio = \"16/9\",\n      height,\n      background,\n      objectPosition = \"center\",\n      loading = \"lazy\",\n      topLeft,\n      topRight,\n      bottomLeft,\n      bottomRight,\n      className,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const cardSize = useCardContext()?.size ?? \"md\";\n\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-card-media=\"\"\n        className={cn(\n          \"relative overflow-hidden\",\n          // Follows the CARD's radius step rather than hardcoding `rounded-t-lg`.\n          // It was fixed, so a `size=\"lg\"` card put a `rounded-xl` frame around\n          // a `rounded-t-lg` image and left a visible sliver of card showing\n          // through each top corner. Defaults to `md` with no card above, which\n          // is the class it used to hardcode.\n          radiusTop[cardSize],\n          // Card's `padding` prop pads EVERY direct child\n          // (`[&>*]:px-4 …`), which would inset the media and break the\n          // flush-to-the-edge look every caller wants. `!` wins regardless of\n          // stylesheet order, which plain `p-0` would not.\n          \"!px-0 !py-0\",\n          className,\n        )}\n        style={{\n          ...(height === undefined ? { aspectRatio: ratio } : { height }),\n          ...(background ? { background } : null),\n          ...style,\n        }}\n        {...props}\n      >\n        {src ? (\n          <img\n            src={src}\n            alt={alt}\n            loading={loading}\n            className=\"absolute inset-0 h-full w-full object-cover\"\n            style={{ objectPosition }}\n          />\n        ) : null}\n\n        {children}\n\n        {topLeft ? <span className=\"absolute left-2 top-2 z-10\">{topLeft}</span> : null}\n        {topRight ? <span className=\"absolute right-2 top-2 z-10\">{topRight}</span> : null}\n        {bottomLeft ? <span className=\"absolute bottom-2 left-2 z-10\">{bottomLeft}</span> : null}\n        {bottomRight ? <span className=\"absolute bottom-2 right-2 z-10\">{bottomRight}</span> : null}\n      </div>\n    );\n  },\n);\n\nCardMedia.displayName = \"CardMedia\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useCardContext, useCardSectionPadding } from \"./Card.context\";\nimport { bleedBottom, bleedTop, bleedX, radiusBottom, radiusTop } from \"./Card.scales\";\nimport type { CardBleedProps } from \"./Card.types\";\n\n/**\n * Run content out to the card's edges — an image, a table, a chart strip.\n *\n * ## Why this is arithmetic and not a CSS-variable protocol\n *\n * Flux solves the same problem with a published set of custom properties\n * (`--flux-bleed-x`, `--flux-bleed-top`, …) that any child component may read.\n * It has to: its padding sits on the CARD, so a descendant has no way to know\n * how far it must reach. That is a public CSS API — a cross-package contract to\n * version forever.\n *\n * Ours does not need one, because padding sits on the card's direct CHILDREN.\n * The distance to the edge is therefore always one padding step, which the\n * padded section passes down in context. No variables, nothing for a consumer\n * to depend on, nothing to keep stable across releases.\n *\n * ## Two cases, and they are opposites\n *\n * - **Inside a `Card.Header` / `Card.Body` / `Card.Footer`** (the normal case):\n *   the padding is on that section, so reaching the edge is a NEGATIVE MARGIN.\n * - **As a direct child of `Card`**: the padding is on this element, so\n *   reaching the edge is ZEROING it. A negative margin here would pull the\n *   content clean outside the card.\n *\n * A component cannot see its own depth, so the sections publish their padding\n * step in context and its absence means \"you are the padded element\". Both\n * cases read as \"cancel the padding\", which is exactly why picking either one\n * alone ships looking correct in whichever demo the author happened to write.\n *\n * The distance comes from that context and NOT from the card's `size`, because\n * the two disagree whenever `padding` is passed explicitly — and disagree by a\n * whole step, which looks like a rendering bug rather than a prop conflict.\n *\n * Corners are rounded only where the content actually meets the card's edge, so\n * a mid-body strip stays square while one at the top follows the card's radius.\n */\nexport const CardBleed = forwardRef<HTMLDivElement, CardBleedProps>(\n  ({ edges = \"x\", className, children, ...props }, ref) => {\n    const card = useCardContext();\n    const section = useCardSectionPadding();\n    // Radius follows the CARD (that is whose corners are being met); the\n    // distance follows the PADDING.\n    const size = card?.size ?? \"md\";\n\n    const touchesTop = edges === \"top\" || edges === \"all\";\n    const touchesBottom = edges === \"bottom\" || edges === \"all\";\n\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-card-bleed=\"\"\n        className={cn(\n          // Clip children to whatever corners we round, or an image's square\n          // edge sits over the card's curve.\n          \"overflow-hidden\",\n          section !== null\n            ? cn(\n                bleedX[section],\n                touchesTop && bleedTop[section],\n                touchesBottom && bleedBottom[section],\n              )\n            : // Direct child of the card: `!` because the padding it is undoing\n              // comes from the card's own `[&>*]` rule, which is equally\n              // specific. Same mechanism `Card.Media` uses.\n              cn(\n                \"!px-0\",\n                touchesTop && \"!pt-0\",\n                touchesBottom && \"!pb-0\",\n              ),\n          touchesTop && radiusTop[size],\n          touchesBottom && radiusBottom[size],\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nCardBleed.displayName = \"CardBleed\";\n","import { forwardRef, useMemo } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CardHeader } from \"./CardHeader\";\nimport { CardBody } from \"./CardBody\";\nimport { CardFooter } from \"./CardFooter\";\nimport { CardMedia } from \"./CardMedia\";\nimport { CardBleed } from \"./CardBleed\";\nimport { CardContext } from \"./Card.context\";\nimport { paddingClasses, radiusClasses, sizePadding } from \"./Card.scales\";\nimport type { CardContextValue, CardProps } from \"./Card.types\";\n\nconst variantClasses: Record<NonNullable<CardProps[\"variant\"]>, string> = {\n  outlined: \"border border-[color:var(--fancy-border,var(--color-zinc-200))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n  elevated: \"shadow-md border border-zinc-100 dark:border-zinc-800\",\n  flat: \"bg-zinc-50 dark:bg-zinc-800/50\",\n  // Tint steps between \"no tint\" and `flat`. They work the same way `flat`\n  // does: a later `bg-*` in the class string beats the base `bg-white`, because\n  // `cn` is tailwind-merge and resolves conflicting utilities last-wins. Class\n  // ORDER decides this, not CSS specificity — so these must stay after the base\n  // background in the `cn(...)` call below.\n  muted: \"bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n  soft: \"bg-zinc-50/70 dark:bg-zinc-800/40\",\n};\n\n/**\n * Padding is applied to the card's DIRECT CHILDREN rather than the card\n * itself, so a full-bleed child (`Card.Media`) can opt out with `!px-0`\n * without having to undo a padding that is already baked into the frame.\n *\n * The selector is `&>*`, not `&>div`. It was `&>div` until 5.24.0, which meant\n * the tag a caller happened to choose silently decided whether that child was\n * padded: `<Card><div>a</div><p>b</p></Card>` inset the div and left the\n * paragraph hard against the border. Nothing in the caller's code hinted at\n * the rule, and the result read as a bug in the card.\n *\n * It is also why there is no `gap` to scale with `size`, which looks like an\n * omission and is not: each direct child carries its own `py-*`, so two\n * adjacent parts already have twice that between their content. Adding a row\n * gap on the card would double a space that is already there.\n */\n\nconst CardRoot = forwardRef<HTMLDivElement, CardProps>(\n  (\n    {\n      variant = \"outlined\",\n      size = \"md\",\n      padding,\n      sections = \"divided\",\n      dividerInset = false,\n      highlight = false,\n      interactive = false,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    // `padding` stays authoritative over the step `size` implies. That order is\n    // what keeps `size` additive: a caller already passing `padding` sees no\n    // change, and `padding=\"none\"` still means none.\n    const resolvedPadding = padding ?? sizePadding[size];\n\n    // The RESOLVED step goes into the context, not `size`. A part that has to\n    // meet the content's edge — an inset divider, a `Card.Bleed` — needs the\n    // distance the card actually applied, and `size` is only the default.\n    const context = useMemo<CardContextValue>(\n      () => ({ size, padding: resolvedPadding, sections, dividerInset }),\n      [size, resolvedPadding, sections, dividerInset],\n    );\n\n    return (\n      <CardContext.Provider value={context}>\n        <div\n          ref={ref}\n          data-react-fancy-card=\"\"\n          className={cn(\n            \"bg-[color:var(--fancy-surface,var(--color-white))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n            radiusClasses[size],\n            variantClasses[variant],\n            // A pseudo-element rather than an inset box-shadow: `shadow-*` and\n            // `shadow-[inset...]` are the same tailwind-merge group, so an\n            // inset shadow here would have SILENTLY DELETED `elevated`'s\n            // `shadow-md`. Highlight and elevation have to be able to coexist.\n            // `dark:` carries a REAL colour. It was `dark:before:bg-transparent`,\n            // which made `highlight` a no-op in the mode that needs it most:\n            // a dark surface has no border contrast of its own, and a 10% white\n            // top edge is the whole reason Flux turns this on by default.\n            highlight &&\n              \"relative before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-white/70 dark:before:bg-white/10\",\n            // `overflow-hidden` is part of `interactive` rather than always-on:\n            // clipping unconditionally would cut off popovers and dropdowns that\n            // legitimately overflow a static card.\n            interactive &&\n              \"overflow-hidden transition hover:-translate-y-0.5 hover:shadow-lg hover:border-zinc-300 dark:hover:border-zinc-600\",\n            paddingClasses[resolvedPadding],\n            className,\n          )}\n          {...props}\n        >\n          {children}\n        </div>\n      </CardContext.Provider>\n    );\n  },\n);\n\nCardRoot.displayName = \"Card\";\n\nexport const Card = Object.assign(CardRoot, {\n  Media: CardMedia,\n  Header: CardHeader,\n  Body: CardBody,\n  Footer: CardFooter,\n  Bleed: CardBleed,\n});\n"]}

package/dist/{chunk-QSFTWIUH.cjs → chunk-36HG5JK6.cjs}

@@ -25,7 +25,7 @@ function NavbarItems({ children, className }) {
       "data-react-fancy-navbar-items": "",
       className: chunkZU5Q77OT_cjs.cn(
         "items-center gap-1",
-        mobileOpen ? "flex flex-col border-t border-zinc-200 pt-4 dark:border-zinc-700" : "hidden md:flex md:flex-row",
+        mobileOpen ? "flex flex-col border-t border-[color:var(--fancy-border,var(--color-zinc-200))] pt-4 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]" : "hidden md:flex md:flex-row",
         className
       ),
       children
@@ -43,7 +43,7 @@ function NavbarItem({
 }) {
   const baseClass = chunkZU5Q77OT_cjs.cn(
     "rounded-lg px-3 py-2 text-sm font-medium transition-colors",
-    active ? "bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-white" : "text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-white",
+    active ? "bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] text-zinc-900 dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:text-white" : "text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-white",
     className
   );
   if (href || As) {
@@ -71,7 +71,7 @@ function NavbarToggle({ className }) {
       type: "button",
       onClick: () => setMobileOpen(!mobileOpen),
       className: chunkZU5Q77OT_cjs.cn(
-        "inline-flex items-center rounded-lg p-2 text-zinc-500 hover:bg-zinc-100 md:hidden dark:hover:bg-zinc-800",
+        "inline-flex items-center rounded-lg p-2 text-zinc-500 hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] md:hidden dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]",
         className
       ),
       "aria-label": "Toggle navigation",
@@ -92,7 +92,7 @@ function NavbarRoot({ children, className }) {
     {
       "data-react-fancy-navbar": "",
       className: chunkZU5Q77OT_cjs.cn(
-        "border-b border-zinc-200 bg-white px-4 py-3 dark:border-zinc-800 dark:bg-zinc-900",
+        "border-b border-zinc-200 bg-[color:var(--fancy-surface,var(--color-white))] px-4 py-3 dark:border-zinc-800 dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]",
         className
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between", children })
@@ -108,5 +108,5 @@ var Navbar = Object.assign(NavbarRoot, {
 
 exports.Navbar = Navbar;
 exports.useNavbar = useNavbar;
-//# sourceMappingURL=chunk-QSFTWIUH.cjs.map
-//# sourceMappingURL=chunk-QSFTWIUH.cjs.map
+//# sourceMappingURL=chunk-36HG5JK6.cjs.map
+//# sourceMappingURL=chunk-36HG5JK6.cjs.map

package/dist/chunk-36HG5JK6.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Navbar/Navbar.context.ts","../src/components/Navbar/NavbarBrand.tsx","../src/components/Navbar/NavbarItems.tsx","../src/components/Navbar/NavbarItem.tsx","../src/components/Navbar/NavbarToggle.tsx","../src/components/Navbar/Navbar.tsx"],"names":["createContext","useContext","jsx","cn","X","Menu","useState","useMemo"],"mappings":"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","file":"chunk-36HG5JK6.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { NavbarContextValue } from \"./Navbar.types\";\n\nexport const NavbarContext = createContext<NavbarContextValue | null>(null);\n\nexport function useNavbar(): NavbarContextValue {\n  const ctx = useContext(NavbarContext);\n  if (!ctx) {\n    throw new Error(\"Navbar compound components must be used within <Navbar>\");\n  }\n  return ctx;\n}\n","import { cn } from \"../../utils/cn\";\nimport type { NavbarBrandProps } from \"./Navbar.types\";\n\nexport function NavbarBrand({ children, className }: NavbarBrandProps) {\n  return (\n    <div data-react-fancy-navbar-brand=\"\" className={cn(\"flex items-center\", className)}>{children}</div>\n  );\n}\n\nNavbarBrand.displayName = \"NavbarBrand\";\n","import { cn } from \"../../utils/cn\";\nimport { useNavbar } from \"./Navbar.context\";\nimport type { NavbarItemsProps } from \"./Navbar.types\";\n\nexport function NavbarItems({ children, className }: NavbarItemsProps) {\n  const { mobileOpen } = useNavbar();\n\n  return (\n    <div\n      data-react-fancy-navbar-items=\"\"\n      className={cn(\n        \"items-center gap-1\",\n        mobileOpen\n          ? \"flex flex-col border-t border-[color:var(--fancy-border,var(--color-zinc-200))] pt-4 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\"\n          : \"hidden md:flex md:flex-row\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\nNavbarItems.displayName = \"NavbarItems\";\n","import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { NavbarItemProps } from \"./Navbar.types\";\n\nexport function NavbarItem({\n  children,\n  href,\n  as: As,\n  active = false,\n  className,\n  ...rest\n}: NavbarItemProps) {\n  const baseClass = cn(\n    \"rounded-lg px-3 py-2 text-sm font-medium transition-colors\",\n    active\n      ? \"bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] text-zinc-900 dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))] dark:text-white\"\n      : \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-white\",\n    className,\n  );\n\n  // Link mode engages on `href` OR `as`: a `to`-based router (TanStack Router,\n  // React Router) passes no href, and without this the item fell through to the\n  // inert <div> below — a nav entry that renders correctly and navigates nowhere.\n  if (href || As) {\n    const Link = (As ?? \"a\") as ElementType;\n\n    // `href` is spread only when set. Passing `href={undefined}` to a `to`-based\n    // router's Link overwrites the href it derives for itself, which renders an\n    // anchor with no destination.\n    return (\n      <Link\n        data-react-fancy-navbar-item=\"\"\n        {...(href ? { href } : {})}\n        className={baseClass}\n        {...rest}\n      >\n        {children}\n      </Link>\n    );\n  }\n\n  return (\n    <div data-react-fancy-navbar-item=\"\" className={baseClass} {...rest}>\n      {children}\n    </div>\n  );\n}\n\nNavbarItem.displayName = \"NavbarItem\";\n","import { Menu, X } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useNavbar } from \"./Navbar.context\";\nimport type { NavbarToggleProps } from \"./Navbar.types\";\n\nexport function NavbarToggle({ className }: NavbarToggleProps) {\n  const { mobileOpen, setMobileOpen } = useNavbar();\n\n  return (\n    <button\n      data-react-fancy-navbar-toggle=\"\"\n      type=\"button\"\n      onClick={() => setMobileOpen(!mobileOpen)}\n      className={cn(\n        \"inline-flex items-center rounded-lg p-2 text-zinc-500 hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] md:hidden dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n        className,\n      )}\n      aria-label=\"Toggle navigation\"\n      aria-expanded={mobileOpen}\n    >\n      {mobileOpen ? (\n        <X size={20} />\n      ) : (\n        <Menu size={20} />\n      )}\n    </button>\n  );\n}\n\nNavbarToggle.displayName = \"NavbarToggle\";\n","import { useMemo, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { NavbarContext } from \"./Navbar.context\";\nimport { NavbarBrand } from \"./NavbarBrand\";\nimport { NavbarItems } from \"./NavbarItems\";\nimport { NavbarItem } from \"./NavbarItem\";\nimport { NavbarToggle } from \"./NavbarToggle\";\nimport type { NavbarProps } from \"./Navbar.types\";\n\nfunction NavbarRoot({ children, className }: NavbarProps) {\n  const [mobileOpen, setMobileOpen] = useState(false);\n\n  const ctx = useMemo(\n    () => ({ mobileOpen, setMobileOpen }),\n    [mobileOpen],\n  );\n\n  return (\n    <NavbarContext.Provider value={ctx}>\n      <nav\n        data-react-fancy-navbar=\"\"\n        className={cn(\n          \"border-b border-zinc-200 bg-[color:var(--fancy-surface,var(--color-white))] px-4 py-3 dark:border-zinc-800 dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n          className,\n        )}\n      >\n        <div className=\"flex items-center justify-between\">\n          {children}\n        </div>\n      </nav>\n    </NavbarContext.Provider>\n  );\n}\n\nexport const Navbar = Object.assign(NavbarRoot, {\n  Brand: NavbarBrand,\n  Items: NavbarItems,\n  Item: NavbarItem,\n  Toggle: NavbarToggle,\n});\n"]}

package/dist/{chunk-TDDWWAM5.js → chunk-3AYRLFNO.js}

@@ -16,7 +16,7 @@ function BreadcrumbsItem({
 }) {
   const baseClass = cn(
     "text-sm",
-    active ? "font-medium text-zinc-900 dark:text-white" : "text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300",
+    active ? "font-medium text-zinc-900 dark:text-white" : "text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]",
     className
   );
   if ((href || As) && !active) {
@@ -60,17 +60,17 @@ function BreadcrumbsDropdown({ items, activeLabel }) {
       {
         type: "button",
         onClick: () => setOpen((v) => !v),
-        className: "flex items-center gap-1 rounded-lg px-2 py-1 text-sm font-medium text-zinc-900 hover:bg-zinc-100 dark:text-white dark:hover:bg-zinc-800",
+        className: "flex items-center gap-1 rounded-lg px-2 py-1 text-sm font-medium text-zinc-900 hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:text-white dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]",
         children: [
           activeLabel,
           /* @__PURE__ */ jsx(ChevronDown, { size: 14, className: cn("transition-transform", open && "rotate-180") })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx("div", { className: "absolute top-full left-0 z-50 mt-1 min-w-[180px] rounded-lg border border-zinc-200 bg-white py-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-900", children: items.map((item, i) => {
+    open && /* @__PURE__ */ jsx("div", { className: "absolute top-full left-0 z-50 mt-1 min-w-[180px] rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] py-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]", children: items.map((item, i) => {
       const cls = cn(
         "block w-full px-3 py-1.5 text-left text-sm",
-        item.active ? "font-medium text-zinc-900 dark:text-white" : "text-zinc-500 hover:bg-zinc-50 hover:text-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
+        item.active ? "font-medium text-zinc-900 dark:text-white" : "text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:bg-zinc-50 hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:bg-zinc-800 dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]"
       );
       if (item.href && !item.active) {
         return /* @__PURE__ */ jsx("a", { href: item.href, className: cls, onClick: () => setOpen(false), children: item.label }, i);
@@ -135,5 +135,5 @@ var Breadcrumbs = Object.assign(BreadcrumbsRoot, {
 });
 
 export { Breadcrumbs };
-//# sourceMappingURL=chunk-TDDWWAM5.js.map
-//# sourceMappingURL=chunk-TDDWWAM5.js.map
+//# sourceMappingURL=chunk-3AYRLFNO.js.map
+//# sourceMappingURL=chunk-3AYRLFNO.js.map

package/dist/chunk-3AYRLFNO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Breadcrumbs/BreadcrumbsItem.tsx","../src/components/Breadcrumbs/BreadcrumbsDropdown.tsx","../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["jsx","useState","jsxs","Fragment"],"mappings":"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","file":"chunk-3AYRLFNO.js","sourcesContent":["import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { BreadcrumbsItemProps } from \"./Breadcrumbs.types\";\n\nexport function BreadcrumbsItem({\n  children,\n  href,\n  as: As,\n  active = false,\n  onClick,\n  className,\n  ...rest\n}: BreadcrumbsItemProps) {\n  const baseClass = cn(\n    \"text-sm\",\n    active\n      ? \"font-medium text-zinc-900 dark:text-white\"\n      : \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]\",\n    className,\n  );\n\n  // The CURRENT crumb stays a <span> even with `as`: it is the page you are on,\n  // so a link to it is a link to nowhere, and `aria-current=\"page\"` is the point.\n  if ((href || As) && !active) {\n    const Link = (As ?? \"a\") as ElementType;\n\n    return (\n      <Link\n        data-react-fancy-breadcrumbs-item=\"\"\n        {...(href ? { href } : {})}\n        onClick={onClick}\n        className={baseClass}\n        {...rest}\n      >\n        {children}\n      </Link>\n    );\n  }\n\n  // A crumb that navigates through a callback rather than a URL. Controlled\n  // components own their navigation and have no href to give — a repository\n  // browser walking directories, a wizard stepping back — and until this\n  // existed the only way to make such a crumb clickable was to nest a button\n  // inside the span below, which is interactive content inside a non-\n  // interactive element.\n  if (onClick && !active) {\n    return (\n      <button\n        type=\"button\"\n        data-react-fancy-breadcrumbs-item=\"\"\n        onClick={onClick}\n        className={cn(baseClass, \"cursor-pointer border-0 bg-transparent p-0\")}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  }\n\n  return (\n    <span data-react-fancy-breadcrumbs-item=\"\" className={baseClass} aria-current={active ? \"page\" : undefined} {...rest}>\n      {children}\n    </span>\n  );\n}\n\nBreadcrumbsItem.displayName = \"BreadcrumbsItem\";\n","import { useState, useRef, type ReactNode } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useOutsideClick } from \"../../hooks/use-outside-click\";\nimport { useEscapeKey } from \"../../hooks/use-escape-key\";\n\ninterface BreadcrumbsDropdownItem {\n  label: ReactNode;\n  href?: string;\n  active?: boolean;\n}\n\ninterface BreadcrumbsDropdownProps {\n  items: BreadcrumbsDropdownItem[];\n  activeLabel: ReactNode;\n}\n\nexport function BreadcrumbsDropdown({ items, activeLabel }: BreadcrumbsDropdownProps) {\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  useOutsideClick(ref, () => setOpen(false), open);\n  useEscapeKey(() => setOpen(false), open);\n\n  return (\n    <div ref={ref} data-react-fancy-breadcrumbs-dropdown=\"\" className=\"relative flex md:hidden\">\n      <button\n        type=\"button\"\n        onClick={() => setOpen((v) => !v)}\n        className=\"flex items-center gap-1 rounded-lg px-2 py-1 text-sm font-medium text-zinc-900 hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:text-white dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\"\n      >\n        {activeLabel}\n        <ChevronDown size={14} className={cn(\"transition-transform\", open && \"rotate-180\")} />\n      </button>\n      {open && (\n        <div className=\"absolute top-full left-0 z-50 mt-1 min-w-[180px] rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] py-1 shadow-lg dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\">\n          {items.map((item, i) => {\n            const cls = cn(\n              \"block w-full px-3 py-1.5 text-left text-sm\",\n              item.active\n                ? \"font-medium text-zinc-900 dark:text-white\"\n                : \"text-[color:var(--fancy-text-muted,var(--color-zinc-500))] hover:bg-zinc-50 hover:text-[color:var(--fancy-text-soft,var(--color-zinc-700))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))] dark:hover:bg-zinc-800 dark:hover:text-[color:var(--fancy-text-soft-dark,var(--color-zinc-300))]\",\n            );\n\n            if (item.href && !item.active) {\n              return (\n                <a key={i} href={item.href} className={cls} onClick={() => setOpen(false)}>\n                  {item.label}\n                </a>\n              );\n            }\n\n            return (\n              <span key={i} className={cls}>\n                {item.label}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n}\n\nBreadcrumbsDropdown.displayName = \"BreadcrumbsDropdown\";\n","import { Children, Fragment, useState, type ReactElement } from \"react\";\nimport { ChevronRight } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { BreadcrumbsItem } from \"./BreadcrumbsItem\";\nimport { BreadcrumbsDropdown } from \"./BreadcrumbsDropdown\";\nimport type { BreadcrumbsProps, BreadcrumbsItemProps } from \"./Breadcrumbs.types\";\n\nfunction BreadcrumbsRoot({\n  children,\n  separator,\n  shrink,\n  className,\n}: BreadcrumbsProps) {\n  const items = Children.toArray(children);\n  const [expanded, setExpanded] = useState(false);\n\n  const sep = separator ?? (\n    <ChevronRight size={12} className=\"text-zinc-400\" />\n  );\n\n  const lastItem = items[items.length - 1];\n\n  // Extract info from children for mobile dropdown\n  const dropdownItems = items.map((child) => {\n    const el = child as ReactElement<BreadcrumbsItemProps>;\n    return {\n      label: el.props?.children,\n      href: el.props?.href,\n      active: el.props?.active,\n    };\n  });\n\n  const activeLabel = dropdownItems[dropdownItems.length - 1]?.label ?? \"Menu\";\n\n  const showShrunk = shrink && !expanded && items.length > 1;\n\n  return (\n    <>\n      {/* Desktop trail */}\n      <nav\n        data-react-fancy-breadcrumbs=\"\"\n        aria-label=\"Breadcrumb\"\n        className={cn(\"hidden items-center gap-2 md:flex\", className)}\n        onMouseLeave={() => shrink && setExpanded(false)}\n      >\n        {showShrunk ? (\n          <>\n            <button\n              type=\"button\"\n              onClick={() => setExpanded(true)}\n              onMouseEnter={() => setExpanded(true)}\n              className=\"text-sm text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300\"\n            >\n              ...\n            </button>\n            <span aria-hidden=\"true\">{sep}</span>\n            {lastItem}\n          </>\n        ) : (\n          items.map((child, i) => (\n            <Fragment key={i}>\n              {i > 0 && <span aria-hidden=\"true\">{sep}</span>}\n              {child}\n            </Fragment>\n          ))\n        )}\n      </nav>\n\n      {/* Mobile dropdown */}\n      <BreadcrumbsDropdown items={dropdownItems} activeLabel={activeLabel} />\n    </>\n  );\n}\n\nexport const Breadcrumbs = Object.assign(BreadcrumbsRoot, {\n  Item: BreadcrumbsItem,\n});\n"]}

package/dist/{chunk-7JDVCQXD.js → chunk-3EWO5EBI.js}

@@ -68,7 +68,7 @@ var ringColorClasses = {
 function Dot({ icon, emoji, color, active }) {
   const c = color ?? "zinc";
   if (emoji) {
-    return /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-zinc-200 bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800", children: /* @__PURE__ */ jsx("span", { className: "text-sm", children: emoji }) });
+    return /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]", children: /* @__PURE__ */ jsx("span", { className: "text-sm", children: emoji }) });
   }
   if (icon) {
     return /* @__PURE__ */ jsx(
@@ -138,12 +138,12 @@ var TimelineItem = forwardRef(
           ),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex h-8 w-full items-center", children: [
-              index > 0 ? /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-zinc-200 dark:bg-zinc-700" }) : /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+              index > 0 ? /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]" }) : /* @__PURE__ */ jsx("div", { className: "flex-1" }),
               /* @__PURE__ */ jsx(Dot, { icon, emoji, color, active }),
-              !isLast ? /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-zinc-200 dark:bg-zinc-700" }) : /* @__PURE__ */ jsx("div", { className: "flex-1" })
+              !isLast ? /* @__PURE__ */ jsx("div", { className: "h-px flex-1 bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]" }) : /* @__PURE__ */ jsx("div", { className: "flex-1" })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "mt-3 max-w-40 px-2 text-center", children: [
-              date && /* @__PURE__ */ jsx("time", { className: "text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: date }),
+              date && /* @__PURE__ */ jsx("time", { className: "text-xs font-medium uppercase tracking-wide text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]", children: date }),
               children
             ] })
           ]
@@ -170,7 +170,7 @@ var TimelineItem = forwardRef(
               isLargeDot && "pt-1",
               isEven ? "md:col-start-1 md:row-start-1 md:text-right" : "md:col-start-3"
             ), children: [
-              date && /* @__PURE__ */ jsx("time", { className: "text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: date }),
+              date && /* @__PURE__ */ jsx("time", { className: "text-xs font-medium uppercase tracking-wide text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]", children: date }),
               children
             ] })
           ]
@@ -191,7 +191,7 @@ var TimelineItem = forwardRef(
         children: [
           /* @__PURE__ */ jsx("div", { className: "relative z-10 flex w-8 shrink-0 justify-center", children: !isLargeDot ? /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsx(Dot, { icon, emoji, color, active }) }) : /* @__PURE__ */ jsx(Dot, { icon, emoji, color, active }) }),
           /* @__PURE__ */ jsxs("div", { className: cn("min-w-0 flex-1", !isLast && "pb-8", isLargeDot && "pt-1"), children: [
-            date && /* @__PURE__ */ jsx("time", { className: "text-xs font-medium uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: date }),
+            date && /* @__PURE__ */ jsx("time", { className: "text-xs font-medium uppercase tracking-wide text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]", children: date }),
             children
           ] })
         ]
@@ -208,12 +208,12 @@ var TimelineBlock = forwardRef(
         ref,
         "data-react-fancy-timeline-block": "",
         className: cn(
-          "rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900",
+          "rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] p-4 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]",
           active && "ring-2 ring-blue-500/20 dark:ring-blue-400/20",
           className
         ),
         children: [
-          heading && /* @__PURE__ */ jsx("div", { className: "mb-2 text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: heading }),
+          heading && /* @__PURE__ */ jsx("div", { className: "mb-2 text-sm font-semibold text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]", children: heading }),
           /* @__PURE__ */ jsx("div", { className: "text-sm text-zinc-600 dark:text-zinc-400", children })
         ]
       }
@@ -252,14 +252,14 @@ var TimelineRoot = forwardRef(
     return /* @__PURE__ */ jsxs("div", { ref, "data-react-fancy-timeline": "", "data-variant": variant, className, children: [
       (heading || description) && /* @__PURE__ */ jsxs("div", { className: "mb-8", children: [
         heading && /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-zinc-900 dark:text-white", children: heading }),
-        description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-zinc-500 dark:text-zinc-400", children: description })
+        description && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]", children: description })
       ] }),
       isHorizontal ? /* @__PURE__ */ jsx(
         "div",
         {
           ref: scrollRef,
-          className: "overflow-x-auto pb-4 -mb-4",
-          style: { scrollbarWidth: "thin", scrollbarColor: "rgb(161 161 170) transparent" },
+          className: "overflow-x-auto pb-4 -mb-4 [scrollbar-color:var(--fancy-text-faint,rgb(161_161_170))_transparent] dark:[scrollbar-color:var(--fancy-text-faint-dark,rgb(161_161_170))_transparent]",
+          style: { scrollbarWidth: "thin" },
           onWheel: handleWheel,
           children: /* @__PURE__ */ jsx("div", { className: "flex min-w-max items-start", children: content })
         }
@@ -267,7 +267,7 @@ var TimelineRoot = forwardRef(
         /* Vertical variants: continuous background line behind all events */
         /* @__PURE__ */ jsxs("div", { className: "relative", children: [
           items.length > 1 && /* @__PURE__ */ jsx("div", { className: cn(
-            "absolute top-0 bottom-0 w-px bg-zinc-200 dark:bg-zinc-700",
+            "absolute top-0 bottom-0 w-px bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]",
             isAlternating ? "left-4 md:left-1/2 md:-translate-x-px" : "left-4"
           ) }),
           content
@@ -283,5 +283,5 @@ var Timeline = Object.assign(TimelineRoot, {
 });
 
 export { Timeline, TimelineBlock, TimelineItem };
-//# sourceMappingURL=chunk-7JDVCQXD.js.map
-//# sourceMappingURL=chunk-7JDVCQXD.js.map
+//# sourceMappingURL=chunk-3EWO5EBI.js.map
+//# sourceMappingURL=chunk-3EWO5EBI.js.map

package/dist/chunk-3EWO5EBI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Timeline/Timeline.context.ts","../src/components/Timeline/TimelineItem.tsx","../src/components/Timeline/TimelineBlock.tsx","../src/components/Timeline/Timeline.tsx"],"names":["forwardRef","jsx","jsxs","useRef"],"mappings":"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","file":"chunk-3EWO5EBI.js","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { TimelineVariant } from \"./Timeline.types\";\n\ninterface TimelineContextValue {\n  variant: TimelineVariant;\n  index: number;\n  total: number;\n  animated: boolean;\n}\n\nexport const TimelineContext = createContext<TimelineContextValue>({\n  variant: \"stacked\",\n  index: 0,\n  total: 0,\n  animated: true,\n});\n\nexport function useTimeline() {\n  return useContext(TimelineContext);\n}\n","import { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useTimeline } from \"./Timeline.context\";\nimport type { TimelineItemProps } from \"./Timeline.types\";\nimport type { Color } from \"../../utils/types\";\n\nconst dotColorClasses: Record<Color, string> = {\n  // The host's colour, from CSS variables -- no dark: variant, because a\n  // host that themes per mode scopes the variables themselves.\n  brand: \"bg-brand\",\n  slate: \"bg-slate-400 dark:bg-slate-600\", gray: \"bg-gray-400 dark:bg-gray-600\",\n  zinc: \"bg-zinc-300 dark:bg-zinc-600\", neutral: \"bg-neutral-400 dark:bg-neutral-600\",\n  stone: \"bg-stone-400 dark:bg-stone-600\",\n  red: \"bg-red-500\", orange: \"bg-orange-500\", amber: \"bg-amber-500\",\n  yellow: \"bg-yellow-500\", lime: \"bg-lime-500\", green: \"bg-green-500\",\n  emerald: \"bg-emerald-500\", teal: \"bg-teal-500\", cyan: \"bg-cyan-500\",\n  sky: \"bg-sky-500\", blue: \"bg-blue-500\", indigo: \"bg-indigo-500\",\n  violet: \"bg-violet-500\", purple: \"bg-purple-500\", fuchsia: \"bg-fuchsia-500\",\n  pink: \"bg-pink-500\", rose: \"bg-rose-500\",\n};\n\nconst ringColorClasses: Record<Color, string> = {\n  // The host's colour, from CSS variables -- no dark: variant, because a\n  // host that themes per mode scopes the variables themselves.\n  brand: \"ring-brand/30\",\n  slate: \"ring-slate-400/30\", gray: \"ring-gray-400/30\",\n  zinc: \"ring-zinc-400/30 dark:ring-zinc-500/30\", neutral: \"ring-neutral-400/30\",\n  stone: \"ring-stone-400/30\",\n  red: \"ring-red-500/30\", orange: \"ring-orange-500/30\", amber: \"ring-amber-500/30\",\n  yellow: \"ring-yellow-500/30\", lime: \"ring-lime-500/30\", green: \"ring-green-500/30\",\n  emerald: \"ring-emerald-500/30\", teal: \"ring-teal-500/30\", cyan: \"ring-cyan-500/30\",\n  sky: \"ring-sky-500/30\", blue: \"ring-blue-500/30\", indigo: \"ring-indigo-500/30\",\n  violet: \"ring-violet-500/30\", purple: \"ring-purple-500/30\", fuchsia: \"ring-fuchsia-500/30\",\n  pink: \"ring-pink-500/30\", rose: \"ring-rose-500/30\",\n};\n\nfunction Dot({ icon, emoji, color, active }: Pick<TimelineItemProps, \"icon\" | \"emoji\" | \"color\" | \"active\">) {\n  const c = color ?? \"zinc\";\n\n  if (emoji) {\n    return (\n      <span className=\"flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\">\n        <span className=\"text-sm\">{emoji}</span>\n      </span>\n    );\n  }\n\n  if (icon) {\n    return (\n      <span\n        className={cn(\n          \"flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-white\",\n          dotColorClasses[c],\n          active && \"ring-4\",\n          active && ringColorClasses[c],\n        )}\n      >\n        {icon}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      className={cn(\n        \"h-3 w-3 shrink-0 rounded-full\",\n        dotColorClasses[c],\n        active && \"ring-4\",\n        active && ringColorClasses[c],\n      )}\n    />\n  );\n}\n\nfunction useIntersectionReveal(animated: boolean) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [visible, setVisible] = useState(!animated);\n\n  useEffect(() => {\n    if (!animated || !ref.current) return;\n    const el = ref.current;\n    const observer = new IntersectionObserver(\n      ([entry]) => { if (entry.isIntersecting) { setVisible(true); observer.disconnect(); } },\n      { threshold: 0.2 },\n    );\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [animated]);\n\n  return { ref, visible };\n}\n\nexport const TimelineItem = forwardRef<HTMLDivElement, TimelineItemProps>(\n  ({ children, icon, emoji, date, color = \"zinc\", active = false, className }, _ref) => {\n    const { variant, index, total, animated } = useTimeline();\n    const { ref, visible } = useIntersectionReveal(animated);\n    const isLast = index === total - 1;\n    const isLargeDot = !!icon || !!emoji;\n    const isEven = index % 2 === 0;\n\n    // ── Horizontal ────────────────────────────────────────\n    if (variant === \"horizontal\") {\n      return (\n        <div\n          ref={ref}\n          data-react-fancy-timeline-item=\"\"\n          className={cn(\n            \"flex flex-col items-center\",\n            !isLast && \"min-w-40\",\n            animated && \"transition duration-500 ease-out\",\n            animated && (visible ? \"translate-y-0 opacity-100\" : \"translate-y-4 opacity-0\"),\n            className,\n          )}\n        >\n          {/* Dot + horizontal line (fixed height for alignment) */}\n          <div className=\"flex h-8 w-full items-center\">\n            {index > 0\n              ? <div className=\"h-px flex-1 bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\" />\n              : <div className=\"flex-1\" />}\n            <Dot icon={icon} emoji={emoji} color={color} active={active} />\n            {!isLast\n              ? <div className=\"h-px flex-1 bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\" />\n              : <div className=\"flex-1\" />}\n          </div>\n\n          {/* Content below */}\n          <div className=\"mt-3 max-w-40 px-2 text-center\">\n            {date && <time className=\"text-xs font-medium uppercase tracking-wide text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\">{date}</time>}\n            {children}\n          </div>\n        </div>\n      );\n    }\n\n    // ── Alternating ───────────────────────────────────────\n    if (variant === \"alternating\") {\n      return (\n        <div\n          ref={ref}\n          data-react-fancy-timeline-item=\"\"\n          className={cn(\n            \"relative flex gap-x-4 md:grid md:grid-cols-[1fr_1.5rem_1fr] md:gap-x-6\",\n            animated && \"transition duration-500 ease-out\",\n            animated && (visible ? \"translate-y-0 opacity-100\" : \"translate-y-4 opacity-0\"),\n            className,\n          )}\n        >\n          {/* Dot (sits on top of the background line) */}\n          <div className=\"relative z-10 flex w-8 shrink-0 justify-center md:col-start-2 md:row-start-1 md:w-auto md:justify-center\">\n            {!isLargeDot ? <div className=\"mt-1.5\"><Dot icon={icon} emoji={emoji} color={color} active={active} /></div> : <Dot icon={icon} emoji={emoji} color={color} active={active} />}\n          </div>\n\n          {/* Content */}\n          <div className={cn(\n            \"min-w-0 flex-1\",\n            !isLast && \"pb-8\",\n            isLargeDot && \"pt-1\",\n            isEven ? \"md:col-start-1 md:row-start-1 md:text-right\" : \"md:col-start-3\",\n          )}>\n            {date && <time className=\"text-xs font-medium uppercase tracking-wide text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\">{date}</time>}\n            {children}\n          </div>\n        </div>\n      );\n    }\n\n    // ── Stacked (default) ─────────────────────────────────\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-timeline-item=\"\"\n        className={cn(\n          \"relative flex gap-x-4\",\n          animated && \"transition duration-500 ease-out\",\n          animated && (visible ? \"translate-y-0 opacity-100\" : \"translate-y-4 opacity-0\"),\n          className,\n        )}\n      >\n        {/* Dot (sits on top of the background line) */}\n        <div className=\"relative z-10 flex w-8 shrink-0 justify-center\">\n          {!isLargeDot\n            ? <div className=\"mt-1.5\"><Dot icon={icon} emoji={emoji} color={color} active={active} /></div>\n            : <Dot icon={icon} emoji={emoji} color={color} active={active} />}\n        </div>\n\n        {/* Content */}\n        <div className={cn(\"min-w-0 flex-1\", !isLast && \"pb-8\", isLargeDot && \"pt-1\")}>\n          {date && <time className=\"text-xs font-medium uppercase tracking-wide text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\">{date}</time>}\n          {children}\n        </div>\n      </div>\n    );\n  },\n);\n\nTimelineItem.displayName = \"TimelineItem\";\n","import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { TimelineItem } from \"./TimelineItem\";\nimport type { TimelineBlockProps } from \"./Timeline.types\";\n\nexport const TimelineBlock = forwardRef<HTMLDivElement, TimelineBlockProps>(\n  ({ heading, children, icon, emoji, color = \"zinc\", active = false, className }, ref) => {\n    return (\n      <TimelineItem icon={icon} emoji={emoji} color={color} active={active}>\n        <div\n          ref={ref}\n          data-react-fancy-timeline-block=\"\"\n          className={cn(\n            \"rounded-lg border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] p-4 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n            active && \"ring-2 ring-blue-500/20 dark:ring-blue-400/20\",\n            className,\n          )}\n        >\n          {heading && (\n            <div className=\"mb-2 text-sm font-semibold text-[color:var(--fancy-text,var(--color-zinc-900))] dark:text-[color:var(--fancy-text-dark,var(--color-zinc-100))]\">\n              {heading}\n            </div>\n          )}\n          <div className=\"text-sm text-zinc-600 dark:text-zinc-400\">{children}</div>\n        </div>\n      </TimelineItem>\n    );\n  },\n);\n\nTimelineBlock.displayName = \"TimelineBlock\";\n","import { Children, forwardRef, useCallback, useRef, type WheelEvent } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { TimelineContext } from \"./Timeline.context\";\nimport { TimelineItem } from \"./TimelineItem\";\nimport { TimelineBlock } from \"./TimelineBlock\";\nimport type { TimelineProps, TimelineVariant } from \"./Timeline.types\";\n\nconst TimelineRoot = forwardRef<HTMLDivElement, TimelineProps>(\n  ({\n    children,\n    variant: variantProp,\n    orientation,\n    events,\n    heading,\n    description,\n    animated = true,\n    className,\n  }, ref) => {\n    const scrollRef = useRef<HTMLDivElement>(null);\n\n    // Backward compat: map deprecated orientation to variant\n    let variant: TimelineVariant = variantProp ?? \"stacked\";\n    if (!variantProp && orientation) {\n      variant = orientation === \"horizontal\" ? \"horizontal\" : \"stacked\";\n    }\n\n    const isHorizontal = variant === \"horizontal\";\n    const isAlternating = variant === \"alternating\";\n\n    // Build items from events prop (data-driven) or children (compound)\n    const items = events\n      ? events.map((e, i) => (\n          <TimelineItem key={i} date={e.date} emoji={e.emoji} icon={e.icon} color={e.color}>\n            {e.title && <h3 className=\"font-semibold text-zinc-900 dark:text-white\">{e.title}</h3>}\n            {e.description && <div className=\"mt-1 text-sm leading-relaxed text-zinc-600 dark:text-zinc-400\">{e.description}</div>}\n          </TimelineItem>\n        ))\n      : Children.toArray(children);\n\n    const handleWheel = useCallback((e: WheelEvent) => {\n      if (!scrollRef.current) return;\n      e.preventDefault();\n      scrollRef.current.scrollLeft += e.deltaY;\n    }, []);\n\n    const content = items.map((child, i) => (\n      <TimelineContext.Provider key={i} value={{ variant, index: i, total: items.length, animated }}>\n        {child}\n      </TimelineContext.Provider>\n    ));\n\n    return (\n      <div ref={ref} data-react-fancy-timeline=\"\" data-variant={variant} className={className}>\n        {(heading || description) && (\n          <div className=\"mb-8\">\n            {heading && <h2 className=\"text-xl font-semibold text-zinc-900 dark:text-white\">{heading}</h2>}\n            {description && <p className=\"mt-1 text-sm text-[color:var(--fancy-text-muted,var(--color-zinc-500))] dark:text-[color:var(--fancy-text-muted-dark,var(--color-zinc-400))]\">{description}</p>}\n          </div>\n        )}\n\n        {isHorizontal ? (\n          <div\n            ref={scrollRef}\n            className=\"overflow-x-auto pb-4 -mb-4 [scrollbar-color:var(--fancy-text-faint,rgb(161_161_170))_transparent] dark:[scrollbar-color:var(--fancy-text-faint-dark,rgb(161_161_170))_transparent]\"\n            style={{ scrollbarWidth: \"thin\" }}\n            onWheel={handleWheel}\n          >\n            <div className=\"flex min-w-max items-start\">\n              {content}\n            </div>\n          </div>\n        ) : (\n          /* Vertical variants: continuous background line behind all events */\n          <div className=\"relative\">\n            {items.length > 1 && (\n              <div className={cn(\n                \"absolute top-0 bottom-0 w-px bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n                isAlternating\n                  ? \"left-4 md:left-1/2 md:-translate-x-px\"\n                  : \"left-4\",\n              )} />\n            )}\n            {content}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nTimelineRoot.displayName = \"Timeline\";\n\nexport const Timeline = Object.assign(TimelineRoot, {\n  Item: TimelineItem,\n  Block: TimelineBlock,\n});\n"]}

package/dist/{chunk-PCTZNK2Z.js → chunk-3NIXNJ3I.js}

@@ -1,7 +1,7 @@
-import { mergeExtensions, htmlToMarkdown, ContentRenderer, extensionEditorClasses, proseClasses, detectFormat } from './chunk-K6EJLBBQ.js';
+import { mergeExtensions, htmlToMarkdown, ContentRenderer, extensionEditorClasses, proseClasses, detectFormat } from './chunk-N5XMBHX7.js';
 import { CodeView } from './chunk-FBWUXSKH.js';
-import { sanitizeHtml } from './chunk-6TBRBN7H.js';
 import { useFieldMode } from './chunk-NRXK42LO.js';
+import { sanitizeHtml } from './chunk-6TBRBN7H.js';
 import { useControllableState } from './chunk-EDYAXGUM.js';
 import { cn } from './chunk-MMW2JGKZ.js';
 import { createContext, useRef, useState, useEffect, useMemo, useCallback, useContext } from 'react';
@@ -33,7 +33,7 @@ function EditorSourceToggle({
       "data-react-fancy-editor-source-toggle": "",
       className: cn(
         "inline-flex h-8 items-center justify-center rounded-md px-2 font-mono text-xs transition-colors",
-        showSource ? "bg-zinc-200 dark:bg-zinc-700" : "hover:bg-zinc-100 dark:hover:bg-zinc-800",
+        showSource ? "bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]" : "hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]",
         className
       ),
       children: icon
@@ -60,7 +60,7 @@ function EditorToolbar({
     {
       "data-react-fancy-editor-toolbar": "",
       className: cn(
-        "flex shrink-0 items-center gap-0.5 border-b border-zinc-200 px-2 py-1.5 dark:border-zinc-700",
+        "flex shrink-0 items-center gap-0.5 border-b border-[color:var(--fancy-border,var(--color-zinc-200))] px-2 py-1.5 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]",
         className
       ),
       children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -79,7 +79,7 @@ function EditorToolbar({
             title: action.label,
             className: cn(
               "inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors",
-              action.active ? "bg-zinc-200 dark:bg-zinc-700" : "hover:bg-zinc-100 dark:hover:bg-zinc-800",
+              action.active ? "bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]" : "hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]",
               showSource && "cursor-not-allowed opacity-40 hover:bg-transparent"
             ),
             children: action.icon
@@ -97,7 +97,7 @@ function EditorToolbarSeparator() {
     "span",
     {
       "data-react-fancy-editor-toolbar-separator": "",
-      className: "mx-1 h-5 w-px bg-zinc-200 dark:bg-zinc-700"
+      className: "mx-1 h-5 w-px bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]"
     }
   );
 }
@@ -300,7 +300,7 @@ function EditorRoot({
         "data-react-fancy-editor": "",
         "data-mode": "view",
         className: cn(
-          "overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900",
+          "overflow-hidden rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]",
           className
         ),
         children: /* @__PURE__ */ jsx(
@@ -323,7 +323,7 @@ function EditorRoot({
       "data-react-fancy-editor": "",
       "data-mode": "edit",
       className: cn(
-        "flex flex-col overflow-hidden rounded-xl border border-zinc-200 bg-white dark:border-zinc-700 dark:bg-zinc-900",
+        "flex flex-col overflow-hidden rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]",
         className
       ),
       children
@@ -340,5 +340,5 @@ var Editor = Object.assign(EditorRoot, {
 });
 
 export { Editor, useEditor };
-//# sourceMappingURL=chunk-PCTZNK2Z.js.map
-//# sourceMappingURL=chunk-PCTZNK2Z.js.map
+//# sourceMappingURL=chunk-3NIXNJ3I.js.map
+//# sourceMappingURL=chunk-3NIXNJ3I.js.map

package/dist/chunk-3NIXNJ3I.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Editor/Editor.context.ts","../src/components/Editor/EditorSourceToggle.tsx","../src/components/Editor/EditorToolbar.tsx","../src/components/Editor/EditorToolbarSeparator.tsx","../src/components/Editor/EditorContent.tsx","../src/components/Editor/Editor.tsx"],"names":["jsx","useRef","useEffect","useMemo"],"mappings":"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","file":"chunk-3NIXNJ3I.js","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { RefObject } from \"react\";\nimport type { RenderExtension } from \"../ContentRenderer/extensions\";\n\nexport interface EditorContextValue {\n  contentRef: RefObject<HTMLDivElement | null>;\n  exec: (command: string, arg?: string) => void;\n  insertText: (text: string) => void;\n  wrapSelection: (before: string, after: string) => void;\n  outputFormat: \"html\" | \"markdown\";\n  lineSpacing: number;\n  placeholder?: string;\n  /** Merged render extensions (global + instance). */\n  extensions: RenderExtension[];\n  /** Whether the raw-source view (textarea) is showing instead of the rich-text surface. */\n  showSource: boolean;\n  /** Toggle/set the raw-source view. */\n  setShowSource: (showSource: boolean) => void;\n  /** Initial HTML content to load into the editor on mount */\n  _initialHtml: string;\n  /** @internal Called by EditorContent on input events */\n  _onInput: () => void;\n  /** @internal Raw source value (`value` in `outputFormat`), for the source textarea. */\n  _sourceValue: string;\n  /** @internal Commit an edit made directly in the source textarea. */\n  _onSourceInput: (value: string) => void;\n}\n\nexport const EditorContext = createContext<EditorContextValue | null>(null);\n\nexport function useEditor(): EditorContextValue {\n  const ctx = useContext(EditorContext);\n  if (!ctx) {\n    throw new Error(\"useEditor must be used within an <Editor> component\");\n  }\n  return ctx;\n}\n","import { cn } from \"../../utils/cn\";\nimport { useEditor } from \"./Editor.context\";\nimport type { EditorSourceToggleProps } from \"./Editor.types\";\n\n/**\n * Toolbar button that reveals the raw HTML/Markdown behind the editor. Reads\n * `showSource` / `setShowSource` from context, so it works in the default\n * toolbar and in any custom toolbar composed with `useEditor()`.\n */\nexport function EditorSourceToggle({\n  className,\n  icon = \"</>\",\n  title = \"Source\",\n  activeTitle = \"Rich text\",\n}: EditorSourceToggleProps) {\n  const { showSource, setShowSource } = useEditor();\n\n  return (\n    <button\n      type=\"button\"\n      onClick={() => setShowSource(!showSource)}\n      title={showSource ? activeTitle : title}\n      aria-pressed={showSource}\n      data-react-fancy-editor-source-toggle=\"\"\n      className={cn(\n        \"inline-flex h-8 items-center justify-center rounded-md px-2 font-mono text-xs transition-colors\",\n        showSource\n          ? \"bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\"\n          : \"hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n        className,\n      )}\n    >\n      {icon}\n    </button>\n  );\n}\n\nEditorSourceToggle.displayName = \"EditorSourceToggle\";\n","import { cn } from \"../../utils/cn\";\nimport { useEditor } from \"./Editor.context\";\nimport { EditorSourceToggle } from \"./EditorSourceToggle\";\nimport type { EditorToolbarProps } from \"./Editor.types\";\n\nconst DEFAULT_ACTIONS = [\n  { icon: \"B\", label: \"Bold\", command: \"bold\" },\n  { icon: \"I\", label: \"Italic\", command: \"italic\" },\n  { icon: \"U\", label: \"Underline\", command: \"underline\" },\n  { icon: \"S\", label: \"Strikethrough\", command: \"strikeThrough\" },\n];\n\nexport function EditorToolbar({\n  actions = DEFAULT_ACTIONS,\n  onAction,\n  children,\n  className,\n  showSourceToggle = true,\n}: EditorToolbarProps) {\n  const { exec, showSource } = useEditor();\n\n  return (\n    <div\n      data-react-fancy-editor-toolbar=\"\"\n      className={cn(\n        \"flex shrink-0 items-center gap-0.5 border-b border-[color:var(--fancy-border,var(--color-zinc-200))] px-2 py-1.5 dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))]\",\n        className,\n      )}\n    >\n      {children ?? (\n        <>\n          {actions.map((action) => (\n            <button\n              key={`${action.command}-${action.commandArg ?? \"\"}`}\n              type=\"button\"\n              // Rich-text commands don't apply to the raw-source textarea.\n              disabled={showSource}\n              onClick={() => {\n                if (onAction) {\n                  onAction(action.command);\n                } else {\n                  exec(action.command, action.commandArg);\n                }\n              }}\n              title={action.label}\n              className={cn(\n                \"inline-flex h-8 w-8 items-center justify-center rounded-md text-sm transition-colors\",\n                action.active\n                  ? \"bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\"\n                  : \"hover:bg-[color:var(--fancy-surface-muted,var(--color-zinc-100))] dark:hover:bg-[color:var(--fancy-surface-muted-dark,var(--color-zinc-800))]\",\n                showSource && \"cursor-not-allowed opacity-40 hover:bg-transparent\",\n              )}\n            >\n              {action.icon}\n            </button>\n          ))}\n          {showSourceToggle && <EditorSourceToggle className=\"ml-auto\" />}\n        </>\n      )}\n    </div>\n  );\n}\n\nEditorToolbar.displayName = \"EditorToolbar\";\n","export function EditorToolbarSeparator() {\n  return (\n    <span\n      data-react-fancy-editor-toolbar-separator=\"\"\n      className=\"mx-1 h-5 w-px bg-[color:var(--fancy-border,var(--color-zinc-200))] dark:bg-[color:var(--fancy-border-dark,var(--color-zinc-700))]\"\n    />\n  );\n}\n\nEditorToolbarSeparator.displayName = \"EditorToolbarSeparator\";\n","import { useEffect, useMemo, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { CodeView } from \"../CodeView\";\nimport { useEditor } from \"./Editor.context\";\nimport { proseClasses, extensionEditorClasses } from \"./editor.utils\";\nimport type { EditorContentProps } from \"./Editor.types\";\n\nexport function EditorContent({ className, maxHeight, sourceClassName }: EditorContentProps) {\n  const {\n    contentRef,\n    lineSpacing,\n    placeholder,\n    extensions,\n    outputFormat,\n    showSource,\n    _initialHtml,\n    _onInput,\n    _sourceValue,\n    _onSourceInput,\n  } = useEditor();\n  // Tracks which seed HTML is currently in the contentEditable. Seeding on the\n  // seed VALUE (not a one-shot boolean) re-seeds when the source view rewrites\n  // `value`, while still never re-seeding on plain keystrokes — typing leaves\n  // `_initialHtml` untouched, so `seededHtml.current === _initialHtml` holds.\n  const seededHtml = useRef<string | null>(null);\n\n  useEffect(() => {\n    // Source view replaces the contentEditable in the tree, so it unmounts.\n    // Forget what we seeded — the div that returns is a fresh, empty one and\n    // must always be re-seeded, even if `value` was left untouched.\n    if (showSource) {\n      seededHtml.current = null;\n      return;\n    }\n    const el = contentRef.current;\n    if (el && seededHtml.current !== _initialHtml) {\n      el.innerHTML = _initialHtml;\n      seededHtml.current = _initialHtml;\n    }\n  }, [contentRef, _initialHtml, showSource]);\n\n  const extClasses = useMemo(\n    () => extensionEditorClasses(extensions),\n    [extensions],\n  );\n\n  if (showSource) {\n    // Raw-source view — a syntax-highlighted code surface (HTML highlighted;\n    // markdown/plain un-highlighted), built on the shared fancy-file-commons\n    // primitives. It's a DIRECT child of the flex-column editor root (no\n    // wrapper — a nested flex box collapses the fill), so `flex-auto` makes it\n    // fill the editor body when height-constrained and grow with content\n    // (≥ minHeight) when not. `maxHeight` caps + scrolls.\n    return (\n      <CodeView\n        value={_sourceValue}\n        onChange={_onSourceInput}\n        language={outputFormat === \"html\" ? \"html\" : \"plaintext\"}\n        placeholder={placeholder}\n        maxHeight={maxHeight}\n        className={cn(\"min-h-0 flex-auto\", sourceClassName)}\n      />\n    );\n  }\n\n  return (\n    <div\n      ref={contentRef}\n      contentEditable\n      suppressContentEditableWarning\n      data-react-fancy-editor-content=\"\"\n      data-placeholder={placeholder}\n      onInput={_onInput}\n      style={{\n        lineHeight: lineSpacing,\n        maxHeight: maxHeight ? `${maxHeight}px` : undefined,\n      }}\n      className={cn(\n        \"min-h-[120px] flex-auto overflow-y-auto px-4 py-3 text-sm outline-none\",\n        \"focus:outline-none\",\n        proseClasses,\n        extClasses,\n        \"empty:before:content-[attr(data-placeholder)] empty:before:text-zinc-400 empty:before:pointer-events-none\",\n        className,\n      )}\n    />\n  );\n}\n\nEditorContent.displayName = \"EditorContent\";\n","import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { marked } from \"marked\";\nimport { cn } from \"../../utils/cn\";\nimport { sanitizeHtml } from \"../../utils/sanitize\";\nimport { useControllableState } from \"../../hooks\";\nimport { EditorContext } from \"./Editor.context\";\nimport { EditorToolbar } from \"./EditorToolbar\";\nimport { EditorToolbarSeparator } from \"./EditorToolbarSeparator\";\nimport { EditorSourceToggle } from \"./EditorSourceToggle\";\nimport { EditorContent } from \"./EditorContent\";\nimport { htmlToMarkdown, detectFormat } from \"./editor.utils\";\nimport { mergeExtensions } from \"../ContentRenderer/extensions\";\nimport { ContentRenderer } from \"../ContentRenderer/ContentRenderer\";\nimport { useFieldMode } from \"../inputs/mode/FieldMode.context\";\nimport type { EditorProps } from \"./Editor.types\";\n\nfunction toHtml(\n  value: string,\n  outputFormat: \"html\" | \"markdown\",\n  unsafe: boolean,\n  valueFormat: \"markdown\" | \"html\" | \"auto\" = \"auto\",\n): string {\n  if (!value) return \"\";\n  const raw = (() => {\n    // An explicit valueFormat is authoritative — the sniff misclassifies\n    // markdown that merely MENTIONS HTML-ish snippets (`<code>`, `<table`),\n    // collapsing it into an innerHTML wall of text (#10).\n    const format =\n      valueFormat !== \"auto\"\n        ? valueFormat\n        : outputFormat === \"html\"\n          ? \"html\"\n          : detectFormat(value);\n    if (format === \"html\") return value;\n    return (marked.parse(value, { async: false }) as string).trim();\n  })();\n  return unsafe ? raw : sanitizeHtml(raw);\n}\n\nfunction EditorRoot({\n  children,\n  className,\n  value: controlledValue,\n  defaultValue = \"\",\n  onChange,\n  outputFormat = \"html\",\n  valueFormat = \"auto\",\n  lineSpacing = 1.6,\n  placeholder,\n  mode: modeProp,\n  extensions: instanceExtensions,\n  unsafe = false,\n  showSource: showSourceProp,\n  defaultShowSource = false,\n  onShowSourceChange,\n}: EditorProps) {\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const [value, setValue] = useControllableState(controlledValue, defaultValue, onChange);\n  const [showSource, setShowSource] = useControllableState(\n    showSourceProp,\n    defaultShowSource,\n    onShowSourceChange,\n  );\n  // View/edit mode — same resolution as the inputs: prop → <Form> context → \"edit\".\n  const mode = useFieldMode(modeProp);\n  const isView = mode === \"view\";\n\n  // The value this editor last emitted through `onChange`. An incoming `value`\n  // equal to it is our own keystroke echoing back; anything else came from\n  // OUTSIDE — an async load, a host reset, a form repopulating.\n  const lastEmitted = useRef<string | null>(null);\n\n  // Bumped only on an external `value` change, so the seed memo below recomputes\n  // for those and stays put while the user types. Without this, `value` was\n  // excluded from the deps to avoid re-seeding on keystrokes, which also meant a\n  // value arriving after mount was silently dropped and the editor stayed blank\n  // forever (#15).\n  const [externalSeed, setExternalSeed] = useState(0);\n  useEffect(() => {\n    if (value !== lastEmitted.current) setExternalSeed((n) => n + 1);\n  }, [value]);\n\n  const initialHtml = useMemo(\n    () => toHtml(value, outputFormat, unsafe, valueFormat),\n    // Seed the contentEditable from the LIVE value when (re)entering edit mode —\n    // and when returning from the raw-source view, which may have rewritten the\n    // value out from under the rich-text surface. `value` itself stays out of\n    // the deps so typing never re-seeds (which would fight the caret);\n    // `externalSeed` covers the externally-driven case instead.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [isView, outputFormat, unsafe, valueFormat, showSource, externalSeed],\n  );\n\n  const extensions = useMemo(\n    () => mergeExtensions(instanceExtensions),\n    [instanceExtensions],\n  );\n\n  const getOutputValue = useCallback(\n    (html: string): string => {\n      return outputFormat === \"markdown\" ? htmlToMarkdown(html) : html;\n    },\n    [outputFormat],\n  );\n\n  const handleInput = useCallback(() => {\n    const el = contentRef.current;\n    if (!el) return;\n    const next = getOutputValue(el.innerHTML);\n    // Record what we emitted BEFORE publishing it, so the value coming back in\n    // is recognised as our own and does not trigger a re-seed mid-keystroke.\n    lastEmitted.current = next;\n    setValue(next);\n  }, [setValue, getOutputValue]);\n\n  const exec = useCallback(\n    (command: string, arg?: string) => {\n      const el = contentRef.current;\n      if (!el) return;\n      el.focus();\n      document.execCommand(command, false, arg);\n      handleInput();\n    },\n    [handleInput],\n  );\n\n  const insertText = useCallback(\n    (text: string) => {\n      const el = contentRef.current;\n      if (!el) return;\n      el.focus();\n      document.execCommand(\"insertText\", false, text);\n      handleInput();\n    },\n    [handleInput],\n  );\n\n  // The source textarea edits `value` directly — it is already the canonical\n  // source in `outputFormat` (html or markdown), so no conversion round-trip.\n  const handleSourceInput = useCallback(\n    (next: string) => {\n      // Also an internal emission — record it so typing in the source view is\n      // not mistaken for an external change on every keystroke.\n      lastEmitted.current = next;\n      setValue(next);\n    },\n    [setValue],\n  );\n\n  const wrapSelection = useCallback(\n    (before: string, after: string) => {\n      const sel = window.getSelection();\n      if (!sel || sel.rangeCount === 0) return;\n      const range = sel.getRangeAt(0);\n      const selectedText = range.toString();\n      const el = contentRef.current;\n      if (!el) return;\n      el.focus();\n      document.execCommand(\"insertText\", false, `${before}${selectedText}${after}`);\n      handleInput();\n    },\n    [handleInput],\n  );\n\n  const contextValue = {\n    contentRef,\n    exec,\n    insertText,\n    wrapSelection,\n    outputFormat,\n    lineSpacing,\n    placeholder,\n    extensions,\n    showSource,\n    setShowSource,\n    _initialHtml: initialHtml,\n    _onInput: handleInput,\n    _sourceValue: value,\n    _onSourceInput: handleSourceInput,\n  };\n\n  // View mode — render the value read-only through ContentRenderer, matching the\n  // editor's own format (markdown/html), instead of the editable toolbar+content\n  // tree. Driven by `mode` / a `<Form mode=\"view\">`, exactly like the inputs.\n  if (isView) {\n    return (\n      <div\n        data-react-fancy-editor=\"\"\n        data-mode=\"view\"\n        className={cn(\n          \"overflow-hidden rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n          className,\n        )}\n      >\n        <ContentRenderer\n          value={value}\n          format={valueFormat !== \"auto\" ? valueFormat : outputFormat}\n          lineSpacing={lineSpacing}\n          extensions={instanceExtensions}\n          unsafe={unsafe}\n          className=\"px-4 py-3\"\n        />\n      </div>\n    );\n  }\n\n  return (\n    <EditorContext.Provider value={contextValue}>\n      <div\n        data-react-fancy-editor=\"\"\n        data-mode=\"edit\"\n        className={cn(\n          \"flex flex-col overflow-hidden rounded-xl border border-[color:var(--fancy-border,var(--color-zinc-200))] bg-[color:var(--fancy-surface,var(--color-white))] dark:border-[color:var(--fancy-border-dark,var(--color-zinc-700))] dark:bg-[color:var(--fancy-surface-dark,var(--color-zinc-900))]\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </EditorContext.Provider>\n  );\n}\n\nconst ToolbarWithSeparator = Object.assign(EditorToolbar, {\n  Separator: EditorToolbarSeparator,\n});\n\nexport const Editor = Object.assign(EditorRoot, {\n  Toolbar: ToolbarWithSeparator,\n  Content: EditorContent,\n  SourceToggle: EditorSourceToggle,\n});\n"]}