@particle-academy/react-fancy 5.29.1 → 5.30.0

package/dist/heading.cjs

@@ -1,13 +1,14 @@
 'use strict';
 
-var chunkY3T7WMT6_cjs = require('./chunk-Y3T7WMT6.cjs');
+require('./chunk-FJKZ5NOA.cjs');
+var chunk65HKNZFG_cjs = require('./chunk-65HKNZFG.cjs');
 require('./chunk-ZU5Q77OT.cjs');
 
 
 
 Object.defineProperty(exports, "Heading", {
   enumerable: true,
-  get: function () { return chunkY3T7WMT6_cjs.Heading; }
+  get: function () { return chunk65HKNZFG_cjs.Heading; }
 });
 //# sourceMappingURL=heading.cjs.map
 //# sourceMappingURL=heading.cjs.map

package/dist/heading.js

@@ -1,4 +1,5 @@
-export { Heading } from './chunk-6GWOB2Z4.js';
+import './chunk-CFH6CJQG.js';
+export { Heading } from './chunk-CESGP5AF.js';
 import './chunk-MMW2JGKZ.js';
 //# sourceMappingURL=heading.js.map
 //# sourceMappingURL=heading.js.map

package/dist/index.cjs

@@ -40,12 +40,11 @@ var chunk6LOV75CN_cjs = require('./chunk-6LOV75CN.cjs');
 var chunkHIN6PHSE_cjs = require('./chunk-HIN6PHSE.cjs');
 var chunkYAJYIRQL_cjs = require('./chunk-YAJYIRQL.cjs');
 var chunkWKNVZUWZ_cjs = require('./chunk-WKNVZUWZ.cjs');
-var chunkFEUAZW3X_cjs = require('./chunk-FEUAZW3X.cjs');
+var chunkSCGE6DCE_cjs = require('./chunk-SCGE6DCE.cjs');
 var chunkB5KK7NYP_cjs = require('./chunk-B5KK7NYP.cjs');
 var chunkVUKIFFWK_cjs = require('./chunk-VUKIFFWK.cjs');
 var chunkLHNC42J3_cjs = require('./chunk-LHNC42J3.cjs');
 var chunkFXP4JLGU_cjs = require('./chunk-FXP4JLGU.cjs');
-var chunkXLFGWNW4_cjs = require('./chunk-XLFGWNW4.cjs');
 var chunkQAFAPHAF_cjs = require('./chunk-QAFAPHAF.cjs');
 var chunkSUCBR6L5_cjs = require('./chunk-SUCBR6L5.cjs');
 var chunkH6PXIB35_cjs = require('./chunk-H6PXIB35.cjs');
@@ -63,7 +62,7 @@ var chunkGBGJWAXZ_cjs = require('./chunk-GBGJWAXZ.cjs');
 var chunkJV6RDIA6_cjs = require('./chunk-JV6RDIA6.cjs');
 var chunkLAQGBLIU_cjs = require('./chunk-LAQGBLIU.cjs');
 var chunkOOZCJLEF_cjs = require('./chunk-OOZCJLEF.cjs');
-var chunkY3T7WMT6_cjs = require('./chunk-Y3T7WMT6.cjs');
+require('./chunk-FJKZ5NOA.cjs');
 var chunkQDVDBUJM_cjs = require('./chunk-QDVDBUJM.cjs');
 var chunkTGNQ5Y6F_cjs = require('./chunk-TGNQ5Y6F.cjs');
 var chunkF7YCIII4_cjs = require('./chunk-F7YCIII4.cjs');
@@ -102,7 +101,9 @@ var chunkBFKCVSNK_cjs = require('./chunk-BFKCVSNK.cjs');
 var chunkQOGKO6JH_cjs = require('./chunk-QOGKO6JH.cjs');
 require('./chunk-3I2KWNXT.cjs');
 var chunkLCNHEYIM_cjs = require('./chunk-LCNHEYIM.cjs');
-var chunk5DQ2XUJI_cjs = require('./chunk-5DQ2XUJI.cjs');
+var chunk5F6V5HHT_cjs = require('./chunk-5F6V5HHT.cjs');
+var chunkXLFGWNW4_cjs = require('./chunk-XLFGWNW4.cjs');
+var chunk65HKNZFG_cjs = require('./chunk-65HKNZFG.cjs');
 var chunk6SO2ZX3J_cjs = require('./chunk-6SO2ZX3J.cjs');
 var chunkN4VHOTMK_cjs = require('./chunk-N4VHOTMK.cjs');
 var chunkZTC3EQFZ_cjs = require('./chunk-ZTC3EQFZ.cjs');
@@ -290,51 +291,51 @@ Object.defineProperty(exports, "usePopover", {
 });
 Object.defineProperty(exports, "JSON_FIELD_TYPES", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.JSON_FIELD_TYPES; }
+  get: function () { return chunkSCGE6DCE_cjs.JSON_FIELD_TYPES; }
 });
 Object.defineProperty(exports, "JsonEditor", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.JsonEditor; }
+  get: function () { return chunkSCGE6DCE_cjs.JsonEditor; }
 });
 Object.defineProperty(exports, "applyJsonEdit", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.applyJsonEdit; }
+  get: function () { return chunkSCGE6DCE_cjs.applyJsonEdit; }
 });
 Object.defineProperty(exports, "describeEdit", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.describeEdit; }
+  get: function () { return chunkSCGE6DCE_cjs.describeEdit; }
 });
 Object.defineProperty(exports, "findJsonConflicts", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.findJsonConflicts; }
+  get: function () { return chunkSCGE6DCE_cjs.findJsonConflicts; }
 });
 Object.defineProperty(exports, "getAtPath", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.getAtPath; }
+  get: function () { return chunkSCGE6DCE_cjs.getAtPath; }
 });
 Object.defineProperty(exports, "inferType", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.inferType; }
+  get: function () { return chunkSCGE6DCE_cjs.inferType; }
 });
 Object.defineProperty(exports, "parseKeyMap", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.parseKeyMap; }
+  get: function () { return chunkSCGE6DCE_cjs.parseKeyMap; }
 });
 Object.defineProperty(exports, "parsePath", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.parsePath; }
+  get: function () { return chunkSCGE6DCE_cjs.parsePath; }
 });
 Object.defineProperty(exports, "pathToString", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.pathToString; }
+  get: function () { return chunkSCGE6DCE_cjs.pathToString; }
 });
 Object.defineProperty(exports, "resolveKeyRule", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.resolveKeyRule; }
+  get: function () { return chunkSCGE6DCE_cjs.resolveKeyRule; }
 });
 Object.defineProperty(exports, "typeMatches", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.typeMatches; }
+  get: function () { return chunkSCGE6DCE_cjs.typeMatches; }
 });
 Object.defineProperty(exports, "Switch", {
   enumerable: true,
@@ -352,10 +353,6 @@ Object.defineProperty(exports, "Select", {
   enumerable: true,
   get: function () { return chunkFXP4JLGU_cjs.Select; }
 });
-Object.defineProperty(exports, "Text", {
-  enumerable: true,
-  get: function () { return chunkXLFGWNW4_cjs.Text; }
-});
 Object.defineProperty(exports, "Kanban", {
   enumerable: true,
   get: function () { return chunkQAFAPHAF_cjs.Kanban; }
@@ -448,10 +445,6 @@ Object.defineProperty(exports, "Grid", {
   enumerable: true,
   get: function () { return chunkOOZCJLEF_cjs.Grid; }
 });
-Object.defineProperty(exports, "Heading", {
-  enumerable: true,
-  get: function () { return chunkY3T7WMT6_cjs.Heading; }
-});
 Object.defineProperty(exports, "ImageViewer", {
   enumerable: true,
   get: function () { return chunkQDVDBUJM_cjs.ImageViewer; }
@@ -722,7 +715,15 @@ Object.defineProperty(exports, "Callout", {
 });
 Object.defineProperty(exports, "Card", {
   enumerable: true,
-  get: function () { return chunk5DQ2XUJI_cjs.Card; }
+  get: function () { return chunk5F6V5HHT_cjs.Card; }
+});
+Object.defineProperty(exports, "Text", {
+  enumerable: true,
+  get: function () { return chunkXLFGWNW4_cjs.Text; }
+});
+Object.defineProperty(exports, "Heading", {
+  enumerable: true,
+  get: function () { return chunk65HKNZFG_cjs.Heading; }
 });
 Object.defineProperty(exports, "Carousel", {
   enumerable: true,

package/dist/index.d.cts

@@ -38,7 +38,7 @@ export { IndexList, IndexListItem, IndexListProps } from './index-list.cjs';
 export { PullQuote, PullQuoteProps } from './pull-quote.cjs';
 export { Stat, StatBand, StatBandProps, StatProps } from './stat.cjs';
 export { Profile, ProfileProps } from './profile.cjs';
-export { d as Card, a as CardBodyProps, b as CardFooterProps, C as CardHeaderProps, e as CardProps } from './Card-BZ5F6-wd.cjs';
+export { e as Card, f as CardBleedEdges, d as CardBleedProps, a as CardBodyProps, b as CardFooterProps, C as CardHeaderProps, c as CardMediaProps, g as CardPadding, h as CardProps, i as CardSectionProps, j as CardSections, k as CardSize } from './Card-CuRZivBz.cjs';
 export { Callout, CalloutProps } from './callout.cjs';
 export { FauxClient, FauxClientProps } from './faux-client.cjs';
 export { StickyNote, StickyNoteColor, StickyNoteProps } from './sticky-note.cjs';

package/dist/index.d.ts

@@ -38,7 +38,7 @@ export { IndexList, IndexListItem, IndexListProps } from './index-list.js';
 export { PullQuote, PullQuoteProps } from './pull-quote.js';
 export { Stat, StatBand, StatBandProps, StatProps } from './stat.js';
 export { Profile, ProfileProps } from './profile.js';
-export { d as Card, a as CardBodyProps, b as CardFooterProps, C as CardHeaderProps, e as CardProps } from './Card-BZ5F6-wd.js';
+export { e as Card, f as CardBleedEdges, d as CardBleedProps, a as CardBodyProps, b as CardFooterProps, C as CardHeaderProps, c as CardMediaProps, g as CardPadding, h as CardProps, i as CardSectionProps, j as CardSections, k as CardSize } from './Card-CuRZivBz.js';
 export { Callout, CalloutProps } from './callout.js';
 export { FauxClient, FauxClientProps } from './faux-client.js';
 export { StickyNote, StickyNoteColor, StickyNoteProps } from './sticky-note.js';

package/dist/index.js

@@ -38,12 +38,11 @@ export { OtpInput } from './chunk-2LBRS6Z4.js';
 export { Pagination } from './chunk-YF2EHBTV.js';
 export { Pillbox } from './chunk-SX4CSO6C.js';
 export { Popover, usePopover } from './chunk-6KXAFP2T.js';
-export { JSON_FIELD_TYPES, JsonEditor, applyJsonEdit, describeEdit, findJsonConflicts, getAtPath, inferType, parseKeyMap, parsePath, pathToString, resolveKeyRule, typeMatches } from './chunk-2HGYDDIQ.js';
+export { JSON_FIELD_TYPES, JsonEditor, applyJsonEdit, describeEdit, findJsonConflicts, getAtPath, inferType, parseKeyMap, parsePath, pathToString, resolveKeyRule, typeMatches } from './chunk-ASCATIDJ.js';
 export { Switch } from './chunk-6ZDXG5VC.js';
 export { DatePicker } from './chunk-L2FPIFMN.js';
 export { Input } from './chunk-L5KKMJ2Q.js';
 export { Select } from './chunk-ZH3SPBVB.js';
-export { Text } from './chunk-5RLP77KK.js';
 export { Kanban, useKanban } from './chunk-O6E2WC3J.js';
 export { Kbd } from './chunk-TJJ63UJV.js';
 export { MagicWand } from './chunk-ZYVWKYPO.js';
@@ -61,7 +60,7 @@ export { MobileMenu, useMobileMenu } from './chunk-P7F32HIH.js';
 export { FileBrowser, FileBrowserNewFolder, useFileBrowser, validateFolderName } from './chunk-TQFQUNV3.js';
 export { FileUpload, useFileUpload } from './chunk-32HCJ5GD.js';
 export { Grid } from './chunk-TM3RTWKI.js';
-export { Heading } from './chunk-6GWOB2Z4.js';
+import './chunk-CFH6CJQG.js';
 export { ImageViewer } from './chunk-MUCXXYDN.js';
 export { IndexList } from './chunk-UKUNWGL5.js';
 export { InputTag, contentEditableAdapter, controlledAdapter, inputAdapter, textareaAdapter } from './chunk-Q7O5TLVU.js';
@@ -100,7 +99,9 @@ export { sanitizeHref, sanitizeHtml } from './chunk-XJXQG34J.js';
 export { Calendar } from './chunk-NTMHP7FS.js';
 import './chunk-NMXCQOHV.js';
 export { Callout } from './chunk-ZXZJYVWP.js';
-export { Card } from './chunk-ZIDBI6JX.js';
+export { Card } from './chunk-CF2U25LM.js';
+export { Text } from './chunk-5RLP77KK.js';
+export { Heading } from './chunk-CESGP5AF.js';
 export { Carousel, useCarousel } from './chunk-RFLPFQFF.js';
 export { Accordion, useAccordion } from './chunk-LYHQ4VBR.js';
 export { AccordionPanel, AccordionPanelContent, AccordionPanelSection, AccordionPanelTrigger, useAccordionPanel, useAccordionSection } from './chunk-I3RPL3GE.js';

package/dist/json-editor.cjs

@@ -1,11 +1,10 @@
 'use strict';
 
-var chunkFEUAZW3X_cjs = require('./chunk-FEUAZW3X.cjs');
+var chunkSCGE6DCE_cjs = require('./chunk-SCGE6DCE.cjs');
 require('./chunk-B5KK7NYP.cjs');
 require('./chunk-VUKIFFWK.cjs');
 require('./chunk-LHNC42J3.cjs');
 require('./chunk-FXP4JLGU.cjs');
-require('./chunk-XLFGWNW4.cjs');
 require('./chunk-V6VFSX6V.cjs');
 require('./chunk-7EZBMGEE.cjs');
 require('./chunk-XKDW6B7X.cjs');
@@ -18,6 +17,7 @@ require('./chunk-XCZZVRBY.cjs');
 require('./chunk-QKFOJKVE.cjs');
 require('./chunk-BFKCVSNK.cjs');
 require('./chunk-LCNHEYIM.cjs');
+require('./chunk-XLFGWNW4.cjs');
 require('./chunk-J2DI6RMR.cjs');
 require('./chunk-KJ22KE56.cjs');
 require('./chunk-L3V3BYVS.cjs');
@@ -31,47 +31,47 @@ require('./chunk-ZU5Q77OT.cjs');
 
 Object.defineProperty(exports, "JsonEditor", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.JsonEditor; }
+  get: function () { return chunkSCGE6DCE_cjs.JsonEditor; }
 });
 Object.defineProperty(exports, "applyJsonEdit", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.applyJsonEdit; }
+  get: function () { return chunkSCGE6DCE_cjs.applyJsonEdit; }
 });
 Object.defineProperty(exports, "describeEdit", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.describeEdit; }
+  get: function () { return chunkSCGE6DCE_cjs.describeEdit; }
 });
 Object.defineProperty(exports, "findJsonConflicts", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.findJsonConflicts; }
+  get: function () { return chunkSCGE6DCE_cjs.findJsonConflicts; }
 });
 Object.defineProperty(exports, "getAtPath", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.getAtPath; }
+  get: function () { return chunkSCGE6DCE_cjs.getAtPath; }
 });
 Object.defineProperty(exports, "inferType", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.inferType; }
+  get: function () { return chunkSCGE6DCE_cjs.inferType; }
 });
 Object.defineProperty(exports, "parseKeyMap", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.parseKeyMap; }
+  get: function () { return chunkSCGE6DCE_cjs.parseKeyMap; }
 });
 Object.defineProperty(exports, "parsePath", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.parsePath; }
+  get: function () { return chunkSCGE6DCE_cjs.parsePath; }
 });
 Object.defineProperty(exports, "pathToString", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.pathToString; }
+  get: function () { return chunkSCGE6DCE_cjs.pathToString; }
 });
 Object.defineProperty(exports, "resolveKeyRule", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.resolveKeyRule; }
+  get: function () { return chunkSCGE6DCE_cjs.resolveKeyRule; }
 });
 Object.defineProperty(exports, "typeMatches", {
   enumerable: true,
-  get: function () { return chunkFEUAZW3X_cjs.typeMatches; }
+  get: function () { return chunkSCGE6DCE_cjs.typeMatches; }
 });
 //# sourceMappingURL=json-editor.cjs.map
 //# sourceMappingURL=json-editor.cjs.map

package/dist/json-editor.js

@@ -1,9 +1,8 @@
-export { JsonEditor, applyJsonEdit, describeEdit, findJsonConflicts, getAtPath, inferType, parseKeyMap, parsePath, pathToString, resolveKeyRule, typeMatches } from './chunk-2HGYDDIQ.js';
+export { JsonEditor, applyJsonEdit, describeEdit, findJsonConflicts, getAtPath, inferType, parseKeyMap, parsePath, pathToString, resolveKeyRule, typeMatches } from './chunk-ASCATIDJ.js';
 import './chunk-6ZDXG5VC.js';
 import './chunk-L2FPIFMN.js';
 import './chunk-L5KKMJ2Q.js';
 import './chunk-ZH3SPBVB.js';
-import './chunk-5RLP77KK.js';
 import './chunk-DEFGT75G.js';
 import './chunk-PWEZCMIY.js';
 import './chunk-KKWNKBKR.js';
@@ -16,6 +15,7 @@ import './chunk-45BBNJQD.js';
 import './chunk-IVRYSSM7.js';
 import './chunk-XJXQG34J.js';
 import './chunk-ZXZJYVWP.js';
+import './chunk-5RLP77KK.js';
 import './chunk-MQ6VGG62.js';
 import './chunk-OL53XYHF.js';
 import './chunk-NRXK42LO.js';

package/docs/Card.md

@@ -1,6 +1,6 @@
 # Card
 
-A container component with optional header, body, and footer sections. Uses `Object.assign` to expose compound sub-components.
+A container with optional media, header, body and footer sections. `Object.assign` exposes the sub-components as compound members (`Card.Header`, `Card.Bleed`, …).
 
 ## Import
 
@@ -16,53 +16,203 @@ import { Card } from "@particle-academy/react-fancy";
 </Card>
 ```
 
+## Padding sits on the children, not the card
+
+This is the one thing worth knowing before anything else, because most of the
+rest follows from it. `padding` compiles to `[&>*]:px-4 [&>*]:py-3` — an inset
+on every **direct child** of the card, not on the card itself.
+
+That is why a full-bleed child (`Card.Media`, `Card.Bleed`) can opt out with
+`!px-0` instead of having to undo padding already baked into the frame, and why
+there is no `gap` prop: each child carries its own `py-*`, so two adjacent
+sections already have twice that between their content.
+
+It also means anything that must line up with the content's edge — an inset
+divider, a bleed — is derived from the **padding step**, never from `size`.
+`size` only picks the default step; `padding` overrides it.
+
 ## Card Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| variant | `"outlined" \| "elevated" \| "flat"` | `"outlined"` | Visual variant |
-| padding | `"none" \| "sm" \| "md" \| "lg"` | `"md"` | Padding applied to child sections |
+| variant | `"outlined" \| "elevated" \| "flat" \| "muted" \| "soft"` | `"outlined"` | Surface treatment. `outlined` is untinted with a border; `elevated` adds `shadow-md`; `soft` → `flat` → `muted` is a ramp of increasingly strong tints, all borderless |
+| size | `"xs" \| "sm" \| "md" \| "lg"` | `"md"` | Scales padding and corner radius together, and is inherited by `Card.Media` and `Card.Bleed` |
+| padding | `"none" \| "xs" \| "sm" \| "md" \| "lg"` | the step `size` implies | The inset applied to every direct child. Pass it to override `size`, including `"none"` |
+| sections | `"divided" \| "plain" \| "banded"` | `"divided"` | How `Card.Header` / `Card.Footer` are set apart: a hairline rule, nothing, or a tinted band |
+| dividerInset | `boolean` | `false` | With `sections="divided"`, stop the rules at the content's edge instead of running them across the card |
+| highlight | `boolean` | `false` | A 1px hairline just inside the top edge — white at 70% in light mode, white at 10% in dark. Reads on a tinted or elevated surface; invisible on an untinted white one |
+| interactive | `boolean` | `false` | Card is a link or a grid tile: hover lift, border and shadow response, and `overflow-hidden` so a `Card.Media` is clipped to the rounded corners |
 
 Also extends all native `<div>` HTML attributes.
 
+`sections`, `size`, `padding` and `dividerInset` are passed down through context,
+so the sub-components never need them repeated.
+
 ## Sub-Components
 
-### Card.Header
+### Card.Media
+
+The fixed-ratio media region at the top of a card: a thumbnail, gradient or
+solid swatch, with slots pinned to its corners. Opts out of the card's padding,
+and rounds its top corners to match the card's `size`.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| src | `string` | - | Image URL. Omit for a pure colour or gradient tile |
+| alt | `string` | `""` | Alt text for the image |
+| ratio | `string` | `"16/9"` | CSS `aspect-ratio`. Ignored when `height` is set |
+| height | `number \| string` | - | Fixed height instead of an aspect ratio |
+| background | `string` | - | Any CSS background value. Shows **under** the image — while it loads, and permanently if it never arrives, so a missing thumbnail degrades to a colour rather than a hole |
+| objectPosition | `string` | `"center"` | `object-position` for the image |
+| loading | `"lazy" \| "eager"` | `"lazy"` | Image loading strategy |
+| topLeft / topRight / bottomLeft / bottomRight | `ReactNode` | - | Slots pinned to the media's corners — a number chip, a status pill |
+
+### Card.Header / Card.Footer
+
+The same component with the rule on opposite edges. Either can be composed from
+props, or given `children` for full control.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| heading | `ReactNode` | - | The title. Rendered through `<Heading>` and tagged `data-react-fancy-card-heading` |
+| headingLevel | `"h1"…"h6"` | `"h3"` | Which heading element to render |
+| description | `ReactNode` | - | Supporting line under the heading. Rendered through a muted `<Text>`, tagged `data-react-fancy-card-description` |
+| actions | `ReactNode` | - | Controls pushed to the far end, vertically centred on the heading. Tagged `data-react-fancy-card-actions` |
+| size | `"xs" \| "sm" \| "md" \| "lg"` | `"md"` | **Only used with no `Card` above** — a standalone section has no card to inherit a size from |
+| children | `ReactNode` | - | Full control. **Wins over** `heading` / `description` / `actions` rather than rendering alongside them |
 
-Renders a section with a bottom border. Accepts all `<div>` HTML attributes.
+Both work **standalone**, outside a `Card`, as a section heading above one. A
+standalone section pads itself and draws no rule — there is no card whose edge
+it could be dividing.
 
 ### Card.Body
 
-Renders a plain content section. Accepts all `<div>` HTML attributes.
+A plain content section. Carries no classes of its own: the card pads it through
+`[&>*]`. Accepts all `<div>` HTML attributes.
 
-### Card.Footer
+### Card.Bleed
 
-Renders a section with a top border. Accepts all `<div>` HTML attributes.
+Runs content out to the card's edges — an image, a table, a chart strip.
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| edges | `"x" \| "top" \| "bottom" \| "all"` | `"x"` | Which edges to reach. `"x"` is the sides only, which is what an inline image or table wants |
+
+Two cases, handled automatically:
+
+- **Inside a `Card.Header` / `Card.Body` / `Card.Footer`** — the padding is on
+  that section, so the bleed escapes it with a negative margin.
+- **As a direct child of `Card`** — the bleed *is* the padded element, so it
+  zeroes its own padding instead. A negative margin here would pull the content
+  clean outside the card.
+
+`edges` cancels the padding of **the element the bleed sits in**, which is the
+card's edge only when the bleed is actually at that edge. `edges="top"` on a
+bleed halfway down a body pulls it up over the preceding content instead — use
+`"top"` when the bleed is the first thing in the card, `"bottom"` when it is the
+last, and `"x"` everywhere in between.
+
+Corners are rounded only where the content meets the card, so a mid-body strip
+stays square while one at the top follows the card's radius.
 
 ## Examples
 
-### Full card with sections
+### Full card with a composed header
+
+No layout wrapper from the caller — `heading` / `description` / `actions` lay
+themselves out.
 
 ```tsx
-<Card variant="elevated" padding="lg">
-  <Card.Header>
-    <h3 className="font-semibold">Settings</h3>
-  </Card.Header>
+<Card variant="elevated" size="lg">
+  <Card.Header
+    heading="Billing"
+    description="Cards, invoices and receipts"
+    actions={<Button size="sm">Edit</Button>}
+  />
   <Card.Body>
-    <p>Configure your preferences below.</p>
+    <Text>Configure your preferences below.</Text>
   </Card.Body>
-  <Card.Footer>
-    <button>Save</button>
-  </Card.Footer>
+  <Card.Footer actions={<Button>Save</Button>} />
 </Card>
 ```
 
-### Flat card without header
+### A media card
 
 ```tsx
-<Card variant="flat">
+<Card interactive>
+  <Card.Media
+    src="/covers/atlas.jpg"
+    alt="Atlas"
+    background="linear-gradient(135deg,#6366f1,#8b5cf6)"
+    topRight={<Badge>new</Badge>}
+  />
+  <Card.Header heading="Atlas" description="Updated 2 days ago" />
+</Card>
+```
+
+`background` is not decoration: it shows while the image loads and stays if the
+image never arrives.
+
+### Seamless sections
+
+```tsx
+<Card sections="plain">
+  <Card.Header heading="No rules" />
+  <Card.Body>…</Card.Body>
+</Card>
+```
+
+`"banded"` tints the header and footer instead; `dividerInset` keeps the rules
+but stops them at the content's edge.
+
+### A full-bleed table
+
+```tsx
+<Card>
+  <Card.Header heading="Invoices" />
   <Card.Body>
-    <p>A simple flat card.</p>
+    <Card.Bleed>
+      <Table data={invoices} />
+    </Card.Bleed>
   </Card.Body>
 </Card>
 ```
+
+### A heading above a card
+
+```tsx
+<Card.Header heading="Team" description="4 members" actions={<Button size="sm">Invite</Button>} />
+<Card>
+  <Card.Body>…</Card.Body>
+</Card>
+```
+
+### An escape hatch
+
+`children` wins over the composition props, so an unusual header is still a
+`Card.Header`:
+
+```tsx
+<Card>
+  <Card.Header>
+    <Profile name="Ada" role="Owner" />
+  </Card.Header>
+  <Card.Body>…</Card.Body>
+</Card>
+```
+
+## Data attributes
+
+| Selector | Element |
+|----------|---------|
+| `[data-react-fancy-card]` | the card |
+| `[data-react-fancy-card-media]` | `Card.Media` |
+| `[data-react-fancy-card-header]` | `Card.Header` |
+| `[data-react-fancy-card-body]` | `Card.Body` |
+| `[data-react-fancy-card-footer]` | `Card.Footer` |
+| `[data-react-fancy-card-bleed]` | `Card.Bleed` |
+| `[data-react-fancy-card-heading]` | the `heading` a section rendered |
+| `[data-react-fancy-card-description]` | the `description` a section rendered |
+| `[data-react-fancy-card-actions]` | the `actions` a section rendered |
+
+See [STYLE.md](../STYLE.md) for theming through these.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-academy/react-fancy",
-  "version": "5.29.1",
+  "version": "5.30.0",
   "description": "React UI component library for Human+ UX — controlled, agent-bridgeable primitives",
   "repository": {
     "type": "git",

package/dist/Card-BZ5F6-wd.d.cts

@@ -1,50 +0,0 @@
-import * as react from 'react';
-import { HTMLAttributes, ReactNode } from 'react';
-
-interface CardProps extends HTMLAttributes<HTMLDivElement> {
-    variant?: "outlined" | "elevated" | "flat";
-    padding?: "none" | "sm" | "md" | "lg";
-    /**
-     * Card is a link or a grid tile: adds the hover lift + border/shadow
-     * response, and clips children to the rounded corners so a `Card.Media`
-     * sits flush.
-     */
-    interactive?: boolean;
-}
-interface CardMediaProps extends HTMLAttributes<HTMLDivElement> {
-    /** Image URL. Omit for a pure colour/gradient tile. */
-    src?: string;
-    alt?: string;
-    /** CSS `aspect-ratio`. Default `"16/9"`. Ignored when `height` is set. */
-    ratio?: string;
-    /** Fixed height instead of an aspect ratio. */
-    height?: number | string;
-    /**
-     * Shown UNDER the image — while it loads, and permanently if it never
-     * arrives. Any CSS background value, so a gradient works.
-     */
-    background?: string;
-    /** `object-position` for the image. Default `"center"`. */
-    objectPosition?: string;
-    loading?: "lazy" | "eager";
-    /** Slots pinned to the media's corners — a number chip, a status pill. */
-    topLeft?: ReactNode;
-    topRight?: ReactNode;
-    bottomLeft?: ReactNode;
-    bottomRight?: ReactNode;
-}
-interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
-}
-interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
-}
-interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
-}
-
-declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>> & {
-    Media: react.ForwardRefExoticComponent<CardMediaProps & react.RefAttributes<HTMLDivElement>>;
-    Header: react.ForwardRefExoticComponent<CardHeaderProps & react.RefAttributes<HTMLDivElement>>;
-    Body: react.ForwardRefExoticComponent<CardBodyProps & react.RefAttributes<HTMLDivElement>>;
-    Footer: react.ForwardRefExoticComponent<CardFooterProps & react.RefAttributes<HTMLDivElement>>;
-};
-
-export { type CardHeaderProps as C, type CardBodyProps as a, type CardFooterProps as b, type CardMediaProps as c, Card as d, type CardProps as e };

package/dist/Card-BZ5F6-wd.d.ts

@@ -1,50 +0,0 @@
-import * as react from 'react';
-import { HTMLAttributes, ReactNode } from 'react';
-
-interface CardProps extends HTMLAttributes<HTMLDivElement> {
-    variant?: "outlined" | "elevated" | "flat";
-    padding?: "none" | "sm" | "md" | "lg";
-    /**
-     * Card is a link or a grid tile: adds the hover lift + border/shadow
-     * response, and clips children to the rounded corners so a `Card.Media`
-     * sits flush.
-     */
-    interactive?: boolean;
-}
-interface CardMediaProps extends HTMLAttributes<HTMLDivElement> {
-    /** Image URL. Omit for a pure colour/gradient tile. */
-    src?: string;
-    alt?: string;
-    /** CSS `aspect-ratio`. Default `"16/9"`. Ignored when `height` is set. */
-    ratio?: string;
-    /** Fixed height instead of an aspect ratio. */
-    height?: number | string;
-    /**
-     * Shown UNDER the image — while it loads, and permanently if it never
-     * arrives. Any CSS background value, so a gradient works.
-     */
-    background?: string;
-    /** `object-position` for the image. Default `"center"`. */
-    objectPosition?: string;
-    loading?: "lazy" | "eager";
-    /** Slots pinned to the media's corners — a number chip, a status pill. */
-    topLeft?: ReactNode;
-    topRight?: ReactNode;
-    bottomLeft?: ReactNode;
-    bottomRight?: ReactNode;
-}
-interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
-}
-interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
-}
-interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
-}
-
-declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>> & {
-    Media: react.ForwardRefExoticComponent<CardMediaProps & react.RefAttributes<HTMLDivElement>>;
-    Header: react.ForwardRefExoticComponent<CardHeaderProps & react.RefAttributes<HTMLDivElement>>;
-    Body: react.ForwardRefExoticComponent<CardBodyProps & react.RefAttributes<HTMLDivElement>>;
-    Footer: react.ForwardRefExoticComponent<CardFooterProps & react.RefAttributes<HTMLDivElement>>;
-};
-
-export { type CardHeaderProps as C, type CardBodyProps as a, type CardFooterProps as b, type CardMediaProps as c, Card as d, type CardProps as e };