cursedbelt 3.0.2 → 4.0.0

package/dist/react/media/mediaResize.css

@@ -9,44 +9,103 @@
  * and the owner reported the feature as absent while prod was serving it. So both grips are
  * legible without hover, and both brighten further on hover/focus rather than appearing on
  * it. Do not "quieten" either back to a hover-only affordance.
+ *
+ * ── 🔴 2026-09-16: the grips live OUTSIDE the picture ──────────────────────────────────
+ * Owner, `ideas/collections-09-14.md`: *"Fix the drag to resize area to no longer overlap
+ * part of the horizontal play timeline area that shows what part of the video is playing. It
+ * should only be draggable when my mouse pointer is at the bottom right corner of the video
+ * player, just like mac windows for other apps work."*
+ *
+ * The corner grip used to be a 64×64 overlay `position: absolute; right: 0; bottom: 0` INSIDE
+ * the clipped frame, riding at `z-index: 12` over Vidstack's control layer, and the gallery
+ * reserved a matching `padding-inline-end` gutter in the player's last two control groups so
+ * the buttons would not lay out underneath it.
+ *
+ * 🔴 MEASURED before anything was changed, with that geometry restored in a real browser
+ * (`e2e/resize-grip-rail.spec.ts` has the numbers): the gutter DID keep the corner's rectangle
+ * off `.vds-time-slider`'s. It is not the thing that was broken, and widening it would have
+ * fixed nothing. Three things were, and none of them is reachable from a gutter:
+ *
+ *  1. `.cbmr-bar` — a full-width strip under the frame whose `padding: 11px 0` with
+ *     `margin-block: -11px` put 11px of drag surface back inside the picture, spanning the
+ *     whole scrub bar. Horizontal padding is BESIDE the slider; the bar is UNDER it.
+ *  2. A gutter can only shorten a control bar this package styles. A `nativeVideoStage`
+ *     gallery puts a plain `<video controls>` in that frame and its UA bar is full-width and
+ *     untouchable, so a grip in the corner lands on the native timeline with no recourse.
+ *  3. It was paid for in the thing the owner was complaining about: 64px of scrub bar,
+ *     surrendered so the grip could sit beside it.
+ *
+ * So the grips moved off the picture entirely, into `.cbmr-rail` — a strip of chrome BELOW the
+ * frame, which is where a Mac window's resize corner is: the window's outside edge, not a
+ * patch of its content. Nothing of either grip is inside the frame at any size, and that is
+ * the only shape in which "does not overlap the timeline" is a property of the layout rather
+ * than a tuning against whatever the current player happens to draw. The gutter rule in
+ * `denseGallery.css` went with it, so the time slider is full width again — which is the rest
+ * of the same sentence.
  */
 
 /*
- * 🔴 ONE number, read from two files.
+ * 🔴 ONE number: the grip's reach AND the height of the rail that holds it.
  *
- * The corner grip's size is also the width of the gutter `denseGallery.css` reserves at the
- * end of a video player's control bar, so the player's own buttons never lay out underneath
- * it. Two literals would desync on the first tweak and the symptom — a grip that covers the
- * fullscreen button, or a gutter with nothing in it — is a thing you can only see by hand.
- * Declared on `:root` because the gutter rule applies to an ANCESTOR of the grip, and a
- * custom property set on the grip itself does not reach back up the tree.
+ * 64px is the owner's 2026-08-25 *"make the corner expansion grabbable area bigger … for some
+ * reason it's hard to grab"* and it may not go down — see `.cbmr-corner`. The rail is exactly
+ * that tall because the rail exists to hold the grip; two literals would desync on the first
+ * tweak and the symptom is a grip clipped by its own strip, which only shows up by hand.
+ * Declared on `:root` because the coarse-pointer block at the bottom raises it for both.
  */
 :root {
 	--cbmr-corner-size: 64px;
 }
 
+/* ── The rail: the chrome the grips live in ──────────────────────────────────────────── */
+
+/*
+ * 🔴 A sibling of the frame, never a child of it. Every consumer renders it directly after
+ * the picture's box (`DenseGalleryShell`, `FocusViewer`), and `MediaResize.spec.tsx` fails if
+ * a player stops doing so — a grip that drifts back inside the frame is exactly the
+ * 2026-09-14 report, and it is invisible to everything except a rendered rectangle.
+ *
+ * It is the positioning context for the corner, which is what keeps the grip's 64px box
+ * bounded by this strip instead of hanging up over the picture.
+ */
+.cbmr-rail {
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	inline-size: 100%;
+	block-size: var(--cbmr-corner-size, 64px);
+	/* Both consumers stack it in a flex COLUMN (`.cbgd-watch-player`, `.inspector`), where a
+	   default `flex-shrink: 1` would let a short container squeeze the strip and clip the grip
+	   out of its own bottom-right corner. The picture is what gives way, never the handle. */
+	flex: none;
+}
+
 /* ── The corner ─────────────────────────────────────────────────────────────────────── */
 
 .cbmr-corner {
 	position: absolute;
-	right: 0;
-	bottom: 0;
+	inset-inline-end: 0;
+	inset-block-end: 0;
 	/*
 	 * 🔴 ABOVE the video player's control layer, which is `z-index: 10` (Vidstack's
-	 * `[data-view-type='video'] .vds-controls`) in THIS same stacking context —
-	 * `[data-media-player]` sets `contain: style`, which opens no stacking context, so
-	 * nothing isolates the player's chrome from the frame around it. At the old `3` the
-	 * grip was painted over and, worse, click-blocked by the bottom `.vds-controls-group`
-	 * (`width: 100%`, `pointer-events: auto`) whenever the bar was visible — which is on
-	 * hover, which is precisely when a person reaches for it. That is the owner's
-	 * 2026-08-25 *"for some reason it's hard to grab"*, and it is why this number may not
-	 * go back down without also moving the grip out of the frame.
+	 * `[data-view-type='video'] .vds-controls`) — `[data-media-player]` sets `contain:
+	 * style`, which opens no stacking context, so nothing isolates the player's chrome
+	 * from the frame around it. At the old `3` the grip was painted over and, worse,
+	 * click-blocked by the bottom `.vds-controls-group` (`width: 100%`, `pointer-events:
+	 * auto`) whenever the bar was visible — which is on hover, which is precisely when a
+	 * person reaches for it. That is the owner's 2026-08-25 *"for some reason it's hard to
+	 * grab"*, and it is why this number may not go back down.
+	 *
+	 * Since 2026-09-16 the grip is in `.cbmr-rail`, outside the frame, so it no longer has
+	 * to win that fight — but a player whose control layer grows a `bottom: -Npx` overhang
+	 * would re-open it, and 12 costs nothing. Keep it.
 	 *
 	 * `12` and not more: it must stay UNDER Vidstack's menus (50) and its fullscreen
 	 * surface, so opening the settings cog still covers the grip rather than the grip
 	 * punching a hole through an open menu.
 	 *
-	 * LOCAL stacking only. This lifts the grip inside its own positioned frame and must
+	 * LOCAL stacking only. This lifts the grip inside its own positioned rail and must
 	 * never reach the app-wide bands — a `--z-` band here would raise the grip over the
 	 * sticky header and every overlay above it.
 	 * guardrails-ignore no-raw-zindex: local stacking inside a positioned media frame. */
@@ -54,35 +113,37 @@
 	display: flex;
 	align-items: flex-end;
 	justify-content: flex-end;
-	/* The target, and the gutter the control bar leaves for it — see `--cbmr-corner-size`.
-	   Well over DESIGN.md §5's 44px floor, deliberately: the owner asked for a bigger grab
-	   area in the same breath as reporting he could not hit it. The padding is the reach,
-	   the glyph is the mark. */
+	/* The target. Well over DESIGN.md §5's 44px floor, deliberately: the owner asked for a
+	   bigger grab area in the same breath as reporting he could not hit it. The padding is
+	   the reach, the glyph is the mark. It fills the rail exactly — see `--cbmr-corner-size`. */
 	inline-size: var(--cbmr-corner-size, 64px);
 	block-size: var(--cbmr-corner-size, 64px);
-	padding: 0 4px 4px 0;
+	padding: 0 6px 6px 0;
 	box-sizing: border-box;
 	cursor: nwse-resize;
 	touch-action: none;
 	border: 0;
 	background: none;
-	/* A soft scrim rather than a filled chip: the grip must be legible over a white sky and
-	   over black letterboxing, and a corner-anchored gradient does that without drawing a
-	   box on top of the picture. */
-	border-end-end-radius: inherit;
 }
 
+/*
+ * The hover plate.
+ *
+ * 🔴 A TOKEN, where this used to be a hardcoded black radial scrim. The scrim was right while
+ * the grip rode on arbitrary media — a photograph has no theme, so app colours tinted it. In
+ * the rail the grip rides on app chrome like every other control, so it takes the app's
+ * colours and the two `guardrails-ignore no-hardcoded-colors` suppressions this rule used to
+ * need are gone with it.
+ */
 .cbmr-corner::before {
 	content: '';
 	position: absolute;
-	inset: 0;
-	border-end-end-radius: inherit;
-	/* Black, not a surface token, and for the same reason `.inspector__viewport` and
-	   the gallery's action pills hardcode theirs: this scrim rides on ARBITRARY MEDIA, which has no
-	   theme. A token here would tint the grip with app chrome over somebody's photograph.
-	   guardrails-ignore no-hardcoded-colors: see above. */
-	/* guardrails-ignore no-hardcoded-colors: one line, because the excuse covers the LINE. */
-	background: radial-gradient(circle at 100% 100%, rgb(0 0 0 / 0.55) 0%, rgb(0 0 0 / 0.34) 52%, rgb(0 0 0 / 0) 80%);
+	inset-inline-end: 2px;
+	inset-block-end: 2px;
+	inline-size: 30px;
+	block-size: 30px;
+	border-radius: var(--radius-md, 0.5rem);
+	background: transparent;
 	pointer-events: none;
 	transition: background 120ms ease;
 }
@@ -93,10 +154,9 @@
 	block-size: 16px;
 	overflow: visible;
 	fill: none;
-	/* White, not a token: this rides on arbitrary media, which has no theme — the same
-	   reasoning the stage's overlay pills use.
-	   guardrails-ignore no-hardcoded-colors: see above. */
-	stroke: rgb(255 255 255 / 0.92);
+	/* Legible at rest — see the file header. `--muted-foreground`, never `--border`, which is
+	   the colour of a hairline nobody is meant to look at. */
+	stroke: var(--muted-foreground, currentColor);
 	stroke-width: 1.6;
 	stroke-linecap: round;
 	transition: stroke 120ms ease, transform 120ms ease;
@@ -104,15 +164,13 @@
 
 .cbmr-corner:hover .cbmr-corner-glyph,
 .cbmr-corner:focus-visible .cbmr-corner-glyph {
-	/* guardrails-ignore no-hardcoded-colors: the hover state of the white glyph above. */
-	stroke: rgb(255 255 255 / 1);
+	stroke: var(--foreground, var(--muted-foreground));
 	transform: scale(1.15);
 }
 
 .cbmr-corner:hover::before,
 .cbmr-corner:focus-visible::before {
-	/* guardrails-ignore no-hardcoded-colors: the hover state of the scrim above. */
-	background: radial-gradient(circle at 100% 100%, rgb(0 0 0 / 0.7) 0%, rgb(0 0 0 / 0.45) 45%, rgb(0 0 0 / 0) 75%);
+	background: var(--border);
 }
 
 .cbmr-corner:focus-visible {
@@ -122,18 +180,27 @@
 
 /* ── The bottom edge ────────────────────────────────────────────────────────────────── */
 
+/*
+ * 🔴 COARSE POINTERS ONLY, and that is a decision, not a tidy-up — see `MediaResize.tsx`'s
+ * header for the whole of it. *"It should only be draggable when my mouse pointer is at the
+ * bottom right corner"* is a verdict on this bar as much as on the corner's old position; the
+ * one reason it was ever kept beside the corner is about a THUMB, so it survives exactly where
+ * a thumb is.
+ */
 .cbmr-bar {
+	display: none;
 	inline-size: 100%;
 	block-size: 22px;
-	display: flex;
 	align-items: center;
 	justify-content: center;
 	cursor: ns-resize;
 	touch-action: none;
-	/* The generous half of the 44px target, without 44px of visible gutter. */
+	/* The generous half of the 44px target, without 44px of visible gutter. 🔴 No negative
+	   margin pulling it back out of the rail: that is how invisible padding came to hang over
+	   the picture's bottom edge and over the transport below it, which is the overlap the
+	   2026-09-14 report is about. The rail is tall enough to hold the reach. */
 	padding: 11px 0;
 	box-sizing: content-box;
-	margin-block: -11px;
 	border: 0;
 	background: none;
 }
@@ -172,15 +239,17 @@
 /*
  * ── A finger is not a mouse ──────────────────────────────────────────────────────────
  * Owner, 2026-08-25 and again 2026-09-08: *"make the corner expansion grabbable area
- * bigger … for some reason it's hard to grab"*. The z-index half of that is above; this is
- * the other half, and it is the one a desktop measurement cannot see. 64px clears
- * `DESIGN.md` §5's 44px floor for a POINTER; a fingertip's contact patch is ~9mm, which on a
- * phone is most of that box, and the grip sits in the one corner a thumb reaches across the
- * whole screen to get to.
+ * bigger … for some reason it's hard to grab"*. 64px clears `DESIGN.md` §5's 44px floor for a
+ * POINTER; a fingertip's contact patch is ~9mm, which on a phone is most of that box, and the
+ * grip sits in the one corner a thumb reaches across the whole screen to get to.
  *
  * Coarse pointers only, so the desktop look — which the owner explicitly said was good — is
- * untouched. `--cbmr-corner-size` is read by `denseGallery.css` for the gutter it reserves in
- * the player's control bar, so widening it here widens that too and the two cannot desync.
+ * untouched. Raising `--cbmr-corner-size` raises the rail with it, so the bigger grip still
+ * fits inside its strip rather than growing back up over the picture.
+ *
+ * 🔴 And this is where `.cbmr-bar` exists at all: the corner is a small target for a thumb,
+ * and on a portrait clip the picture's bottom edge is the one part of the stage whose position
+ * does not move with the file.
  */
 @media (pointer: coarse) {
 	:root {
@@ -192,9 +261,13 @@
 		inline-size: 22px;
 		block-size: 22px;
 	}
+	.cbmr-corner::before {
+		inline-size: 40px;
+		block-size: 40px;
+	}
 	/* Same reasoning for the bar: the ink stays a hairline, the reach grows. */
 	.cbmr-bar {
+		display: flex;
 		padding: 15px 0;
-		margin-block: -15px;
 	}
 }

package/dist/react/media/pictureEditor.css

@@ -263,12 +263,58 @@
 	cursor: default;
 }
 
-/* A quarter-turned clip is still laid out in its ORIGINAL box, so its width is bounded by the
-   container's HEIGHT and vice versa. Container query units are the only way to say that. Set
-   only for the ODD turns — a half turn does not change the box and pays for none of this. */
-.cbpe-frame-film[data-turned='true'] video {
+/* The film, sized exactly like the `<img>` the picture editor puts in the same frame: contained,
+   centred, never overflowing the box it is previewed in. Written out here because `.cbpe-frame
+   img` cannot say it for an element that is not an image, and without it the preview is whatever
+   size the browser's default happens to make it — which for a phone clip is a postage stamp in
+   the middle of a black frame, i.e. the thing this dialog is for is invisible. */
+.cbpe-frame video {
+	max-width: 100%;
+	max-height: 100%;
+	object-fit: contain;
+	transform-origin: center;
+}
+
+/* A quarter-turned clip is still laid out in its ORIGINAL box, so its width has to be read from
+   the container's HEIGHT and vice versa. Container query units are the only way to say that.
+   Set only for the ODD turns — a half turn does not change the box and pays for none of this.
+
+   🔴 An explicit SIZE, not a `max-*` bound. The same correction, for the same reason, as
+   `.cbmg-stage-turn[data-turned='true']` in `mediaGallery.css` (which documents the measurement):
+   a bound can only shrink, so a turned clip stayed whatever size it already was and the preview
+   showed a pillar the stage was about to show full-width. The preview and the stage have to
+   agree — a preview that under-sells the turn is a preview somebody rejects a correct edit on.
+   `img` as well as `video`: a clip that will not play falls back to its poster, and the poster
+   is turned by the same transform. */
+.cbpe-frame-film[data-turned='true'] video,
+.cbpe-frame-film[data-turned='true'] img {
 	max-width: none;
 	max-height: none;
-	max-block-size: 100cqi;
-	max-inline-size: 100cqb;
+	max-block-size: none;
+	max-inline-size: none;
+	width: 100cqb;
+	height: 100cqi;
+	aspect-ratio: auto;
+	object-fit: contain;
+}
+
+/* Why there is no moving picture, said ON the frame that would otherwise be black — the owner's
+   *"I see a black screen"*, which he could only report as a black screen because the dialog said
+   nothing. Centred over the ground rather than under the frame so it is read as being about the
+   picture, and `pointer-events: none` so it never eats a press meant for the film. */
+.cbpe-frame-note {
+	position: absolute;
+	inset-inline: 1.5rem;
+	top: 50%;
+	transform: translateY(-50%);
+	margin: 0;
+	text-align: center;
+	text-wrap: balance;
+	font-size: 13px;
+	line-height: 1.5;
+	/* guardrails-ignore no-hardcoded-colors: sits ON the picture ground, which is true black in
+	   both themes — the same argument as `.cbpe-hint` above. */
+	color: rgb(255 255 255 / 0.82);
+	text-shadow: 0 1px 2px rgb(0 0 0 / 0.6);
+	pointer-events: none;
 }

package/dist/react/media/videoChapterEditor.css

@@ -0,0 +1,203 @@
+/* Plain CSS, colocated with `VideoChapterEditor.tsx` and imported by it — the same
+   convention, and the same reason, as `videoCutEditor.css`: the editor is lazily imported
+   from the gallery, so these bytes ride the gallery's chunk instead of landing in whichever
+   ENTRY stylesheet happened to scan a utility class. Every colour is a theme token. */
+
+.cbch {
+	display: flex;
+	flex-direction: column;
+	gap: 0.75rem;
+	min-height: 0;
+}
+
+.cbch-video {
+	inline-size: 100%;
+	max-block-size: 44vh;
+	background: var(--surface-2, var(--background));
+	border-radius: var(--radius-md, 8px);
+}
+
+/* The one authoring row: name the section, then mark it. In that order, because the button
+   is disabled until there is a name — see the component. */
+.cbch-add {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	flex-wrap: wrap;
+}
+
+.cbch-add-field {
+	flex: 1 1 14rem;
+	min-inline-size: 0;
+}
+
+/* Tabular figures, and this is not cosmetic: the playhead readout changes ten times a second,
+   and proportional digits make the whole row shuffle sideways under the controls beside it
+   while a clip plays. */
+.cbch-playhead {
+	font-variant-numeric: tabular-nums;
+	font-size: 0.875rem;
+	color: var(--muted-foreground);
+}
+
+/* ── The strip ───────────────────────────────────────────────────────────────
+   What the scrub bar will look like once this is saved: the named sections, in place and to
+   scale. Not a scrub bar itself — the `<video>`'s own controls are that, and a second
+   draggable timeline would be two controls fighting for one gesture. */
+.cbch-strip {
+	position: relative;
+	display: flex;
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	inline-size: 100%;
+	block-size: 40px;
+	border-radius: var(--radius-md, 8px);
+	background: var(--surface-3, var(--surface-2));
+	border: 1px solid var(--border);
+	overflow: hidden;
+}
+
+/* The list item carries the WIDTH — the section's duration — and the button fills it. Split
+   in two so the width lives on the flex child rather than on a control that also has padding. */
+.cbch-span-item {
+	min-inline-size: 0;
+	flex: 0 0 auto;
+	block-size: 100%;
+}
+
+/* The unnamed opening, when the first chapter is not at 0:00. Drawn, but not a control: there
+   is nothing to jump to and nothing to rename — it is the part that has no section yet. */
+.cbch-lead {
+	flex: 0 0 auto;
+	block-size: 100%;
+	border-inline-end: 1px solid var(--border);
+	background: repeating-linear-gradient(
+		135deg,
+		transparent 0 6px,
+		color-mix(in srgb, var(--muted-foreground) 14%, transparent) 6px 12px
+	);
+}
+
+.cbch-span {
+	display: flex;
+	align-items: center;
+	gap: 0.25rem;
+	/* `min-inline-size: 0` and no flex-grow: the inline width set per section is the truth. */
+	inline-size: 100%;
+	block-size: 100%;
+	padding-inline: 0.375rem;
+	border: 0;
+	/* A hairline between sections, so two adjacent ones read as two rather than one. */
+	border-inline-end: 1px solid var(--border);
+	background: var(--surface-1, var(--background));
+	color: var(--foreground);
+	font-size: 0.75rem;
+	white-space: nowrap;
+	overflow: hidden;
+	cursor: pointer;
+	transition: background 120ms ease;
+}
+
+.cbch-span-item:last-of-type .cbch-span {
+	border-inline-end: 0;
+}
+
+.cbch-span:hover {
+	background: var(--surface-2);
+}
+
+.cbch-span:focus-visible {
+	outline: 2px solid var(--ring, var(--muted-foreground));
+	outline-offset: -2px;
+}
+
+.cbch-span-label {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.cbch-strip-head {
+	position: absolute;
+	inset-block: 0;
+	inline-size: 2px;
+	background: var(--foreground);
+	/* Over the sections, but it must never eat a click meant for one. */
+	pointer-events: none;
+}
+
+.cbch-summary {
+	font-size: 0.875rem;
+	color: var(--muted-foreground);
+	margin: 0;
+}
+
+.cbch-list {
+	list-style: none;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	flex-direction: column;
+	gap: 0.25rem;
+	max-block-size: 24vh;
+	/* guardrails-ignore no-raw-overflow: a Tailwind-free `.cbch-` list inside a lazily
+	   imported editor, not a ScrollArea consumer — same as `videoCutEditor.css`. */
+	overflow-y: auto;
+}
+
+.cbch-row {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	padding-inline: 0.25rem;
+	border-radius: var(--radius-sm, 6px);
+}
+
+.cbch-row:hover {
+	background: var(--surface-2);
+}
+
+.cbch-row-goto {
+	flex: 0 0 auto;
+	display: flex;
+	align-items: center;
+	gap: 0.375rem;
+	/* DESIGN.md §5's touch floor — a row you jump the playhead with is a real control. */
+	min-block-size: 44px;
+	padding-inline: 0.25rem;
+	border: 0;
+	background: none;
+	color: var(--muted-foreground);
+	font-variant-numeric: tabular-nums;
+	font-size: 0.875rem;
+	text-align: start;
+	cursor: pointer;
+}
+
+.cbch-row-goto:hover {
+	color: var(--foreground);
+}
+
+.cbch-row-goto:focus-visible {
+	outline: 2px solid var(--ring, var(--muted-foreground));
+	outline-offset: -2px;
+	border-radius: var(--radius-sm, 6px);
+}
+
+.cbch-row-title {
+	flex: 1 1 auto;
+	min-inline-size: 0;
+}
+
+.cbch-empty {
+	margin: 0;
+	padding-block: 0.75rem;
+	text-align: center;
+	font-size: 0.875rem;
+	color: var(--muted-foreground);
+}
+
+.cbch-note {
+	font-size: 0.875rem;
+	color: var(--muted-foreground);
+}

package/dist/react/media/videoChapters.d.ts

@@ -0,0 +1,117 @@
+/**
+ * Marking points in a video and NAMING them — YouTube chapters, as a model, with no browser
+ * and no encoder in it.
+ *
+ * ── The owner's ask, 2026-09-15 ────────────────────────────────────────────────────────
+ * *"allow putting markers on videos at points in time and giving them a title for the section
+ * for knowing what that part of the video is about, like youtube chapters."*
+ *
+ * 🔴 This is the OTHER HALF of the gesture `videoCuts.ts` models, and it is deliberately not
+ * threaded through it. A cut is a point that says *remove what follows*; a chapter is a point
+ * that says *this part is called X, and it stays*. They look alike on a timeline and they have
+ * nothing else in common: a cut list is a REQUEST that costs a full re-encode and arrives back
+ * as a second file, while a chapter list is metadata that needs no encoder at all, applies the
+ * instant it is saved, and is free to be wrong. Putting a chapter on the cut list would make
+ * naming a section queue an ffmpeg job.
+ *
+ * ── Why the model is separate from the dialog ─────────────────────────────────────────
+ * Same reason as the cut list: a chapter list is DATA. It is produced by `VideoChapterEditor`,
+ * travels to whatever the app persists it in, and is read back by the player. A server that
+ * accepts one will want to re-check it, and "what makes a chapter list valid" must have exactly
+ * one definition or the editor and the store will disagree about a list neither of them
+ * refused. Nothing in this file imports React, and nothing in it touches the DOM.
+ *
+ * ── 🔴 Why it is HERE and not in `cursedbelt-core/media`, beside `videoCuts.ts` ────────
+ * Because `cursedbelt-core` is consumed BY PUBLISHED VERSION (forge rule 1; `src/noPathDeps.
+ * spec.ts` refuses a `file:`/`link:` dependency outright), so a module added to that package
+ * is unreachable from this one until it is published — `demo/vite.config.ts` says the same
+ * thing in its own header: *"a new subpath importable here the moment it is published"*. A
+ * chapter model in core today would mean this package could not typecheck against it, so the
+ * feature could not ship at all. The same reasoning, in the same words, put
+ * `fileTreeSelection.ts` in this package on 2026-09-15 — see `publicSurface.baseline`.
+ *
+ * It is written to MOVE: framework-free, no local imports but a type, and the only thing
+ * standing between it and `core/media/videoChapters.ts` is a published `cursedbelt-core`. When
+ * that happens the migration is a delete plus a re-export, exactly as `react/media/index.ts`
+ * already re-exports the cut model.
+ */
+import type { PlayableVideo } from 'cursedbelt-core/media';
+/** One named section, by the point in the source it BEGINS at. Seconds from the start. */
+export interface VideoChapter {
+    startSeconds: number;
+    /** What that part is about. Trimmed, and never empty — an unnamed mark is unreadable. */
+    title: string;
+}
+/**
+ * The shortest section worth naming, in seconds — and therefore how far apart two chapters
+ * have to be to be two chapters.
+ *
+ * 🔴 It is the anti-duplicate rule and the anti-sliver rule at once, which is why there is one
+ * number rather than an equality test plus a floor. Two chapters at the same instant make a
+ * section of zero length: it is unreachable from the chapters menu, it renders as a divider
+ * with no room between it and the next, and on the scrub bar the two dividers land on the same
+ * pixel — so the list says two sections and the player can only ever show one. A second is
+ * generous (YouTube's own floor is ten) and still far below anything a person marks on purpose.
+ */
+export declare const MIN_CHAPTER_SECONDS = 1;
+/** A chapter with the end it runs to — the next one's start, or the end of the clip. */
+export interface ChapterSpan extends VideoChapter {
+    endSeconds: number;
+    /**
+     * Stable across re-renders and safe as a React key.
+     *
+     * 🔴 The START, never the title. The editor renders a text field per row: keying on the
+     * title would give every keystroke a new key, so React would unmount the field being typed
+     * in and the caret would jump out of it on the first letter.
+     */
+    key: string;
+}
+/**
+ * A {@link PlayableVideo} that carries its named sections.
+ *
+ * 🔴 An intersection rather than a field on `PlayableVideo` itself for the reason in this
+ * file's header: that type lives in the published `cursedbelt-core`, which this package cannot
+ * edit and read in the same commit. It widens, so every existing consumer of `PlayableVideo` —
+ * every source, every stage, the player's own props — keeps typechecking untouched, and the
+ * day core carries `chapters` this alias becomes `PlayableVideo` and nothing else changes.
+ */
+export type ChapteredVideo = PlayableVideo & {
+    chapters?: VideoChapter[];
+};
+/**
+ * Put a raw list into the one canonical form everything downstream may assume: inside the
+ * clip, ordered, named, and never two chapters closer than a section.
+ *
+ * Invalid entries are DROPPED rather than reported — this is the read path, and a list that
+ * came back from a store against a slightly different duration must still play. The editor
+ * refuses the same things out loud through {@link chapterProblem}, so nothing a person types
+ * is silently discarded; the two agree because the second is written in terms of the first.
+ *
+ * A non-finite start (the usual source is a playhead read from a `<video>` whose metadata has
+ * not loaded, which reports `NaN`) drops its chapter instead of poisoning the sort: every
+ * comparison against `NaN` is false, which produces an array `sort` calls sorted and is not,
+ * and then the de-duplication pass below compares against the wrong neighbour.
+ */
+export declare function normalizeChapters(chapters: readonly VideoChapter[], duration: number): VideoChapter[];
+/**
+ * Why this chapter cannot be placed, or `null` when it can.
+ *
+ * 🔴 A SENTENCE, not a boolean, and the same sentence in the editor and in whatever route ends
+ * up storing one. All four refusals are reachable in a few seconds of marking, and each names
+ * the thing to do about it rather than the rule it broke.
+ */
+export declare function chapterProblem(draft: VideoChapter, existing: readonly VideoChapter[], duration: number): string | null;
+/**
+ * The sections themselves: every chapter runs until the next one begins, and the last runs to
+ * the end of the clip.
+ *
+ * This is what both surfaces read — the editor's strip and the player's chapters track — from
+ * one function, because the alternative is two independent readings of "where does this
+ * section end" and a scrub bar whose dividers disagree with the list beside it.
+ *
+ * The clip before the FIRST chapter is deliberately not a span. A video whose first mark is at
+ * 2:00 has an unnamed opening, and inventing a section called nothing for it would put a row
+ * in the chapters menu that says less than no row at all.
+ */
+export declare function chapterSpans(chapters: readonly VideoChapter[], duration: number): ChapterSpan[];
+//# sourceMappingURL=videoChapters.d.ts.map