@ossclip/scenes 0.1.11 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ossclip/scenes",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "description": "ossclip's scene library and stage geometry — React components shared by preview and render",
   "type": "module",
   "license": "MIT",
@@ -19,7 +19,7 @@
   ],
   "dependencies": {
     "zod": "^3.25.0",
-    "@ossclip/core": "0.1.11"
+    "@ossclip/core": "0.1.13"
   },
   "peerDependencies": {
     "react": ">=18",

package/src/CaptionTrack.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { AbsoluteFill, Sequence, useCurrentFrame, useVideoConfig } from "remotion";
-import type { CaptionLine, SceneCue } from "@ossclip/core/browser";
+import { lineDirection, type CaptionLine, type SceneCue } from "@ossclip/core/browser";
 import { safeAreaFor, activeCueAt } from "./stage";
 import { frameWindow } from "./frames";
 import { captionAnchorAvoiding, regionsDuring, type OccupiedRegion } from "./source-fit";
@@ -79,6 +79,14 @@ const LineView: React.FC<{
   const safeArea = safeAreaFor({ width, height });
   // The parent <Sequence> starts at line.start, so local frame 0 === line.start.
   const t = line.start + frame / fps;
+  // Per-line, from the text itself (first-strong, see lineDirection): Urdu
+  // captions were laying out LTR (Urdu field test 2026-08-05). On the flex
+  // row `direction: rtl` reverses the VISUAL order of the word spans and the
+  // wrap direction; the highlight below is keyed to each word's own
+  // start/end times, not to position, so it still walks in spoken order.
+  // Mixed runs INSIDE a word (Latin, digits) are the browser's bidi to
+  // resolve against this direction — never hand-reordered here.
+  const direction = lineDirection(line.words.map((w) => w.text).join(" "));
   return (
     <AbsoluteFill style={{ pointerEvents: "none" }}>
       <div
@@ -88,6 +96,7 @@ const LineView: React.FC<{
           left: 0,
           right: 0,
           transform: "translateY(-50%)",
+          direction,
           display: "flex",
           justifyContent: "center",
           gap: "0.28em",

package/src/Watermark.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import type { Theme } from "@ossclip/core/browser";
+import type { FrameSize } from "./stage";
+import { watermarkLayout } from "./watermark-layout";
+
+/**
+ * The opt-in "made with ossclip" wordmark (see watermark-layout.ts for the
+ * why and the placement rules). Styled from the THEME's display font and
+ * foreground — never hardcoded — so a themed production credits the tool in
+ * its own voice.
+ *
+ * Deliberately invisible to the editor: no `data-edit-id`/`data-edit-scene`
+ * (the DOM is the hit-test registry — hitTest.ts walks those attributes, so
+ * an untagged node can never become a selection) and `pointerEvents: none`
+ * so `elementFromPoint` falls through to whatever the wordmark overlaps. A
+ * credit is a produce-time switch, not an editable scene element.
+ */
+export const Watermark: React.FC<{ theme: Theme; frame: FrameSize }> = ({ theme, frame }) => {
+  const l = watermarkLayout(frame);
+  return (
+    <div
+      style={{
+        position: "absolute",
+        left: l.xPx,
+        top: l.yPx,
+        fontFamily: theme.fontDisplay,
+        fontSize: l.fontPx,
+        fontWeight: 600,
+        letterSpacing: "0.02em",
+        color: theme.fg,
+        opacity: l.opacity,
+        pointerEvents: "none",
+        whiteSpace: "nowrap",
+      }}
+    >
+      {l.text}
+    </div>
+  );
+};

package/src/index.ts

@@ -2,4 +2,6 @@ export { EdlVideo, type EdlVideoProps } from "./EdlVideo";
 export { CaptionTrack, type CaptionTrackProps } from "./CaptionTrack";
 export { VideoStage } from "./VideoStage";
 export { SceneLayer } from "./SceneLayer";
+export { Watermark } from "./Watermark";
 export * from "./stage";
+export * from "./watermark-layout";

package/src/watermark-layout.ts

@@ -0,0 +1,67 @@
+import { PORTRAIT_FRAME, safeAreaFor, type FrameSize } from "./stage";
+
+/**
+ * The opt-in "made with ossclip" wordmark. OPT-IN is the whole design: the
+ * default stays off for everyone, because a forced watermark on an
+ * open-source tool reads as a free-tier limitation — this exists so the
+ * author (or anyone who wants to) can voluntarily credit the tool on videos
+ * they post, nothing more.
+ *
+ * Pure placement math, separated from the component so both frames can be
+ * asserted without React or Remotion in the loop (house rule: pure logic
+ * apart from rendering).
+ */
+
+export const WATERMARK_TEXT = "made with ossclip";
+
+/**
+ * Low enough to read as a credit, not a caption — it must never compete with
+ * the captions or the scene graphics for attention.
+ */
+export const WATERMARK_OPACITY = 0.45;
+
+/**
+ * Font size as a fraction of the frame's SHORT edge. Both output shapes share
+ * a 1080px short edge, so the wordmark renders at the same physical size in
+ * 9:16 and 16:9 instead of ballooning with the long edge.
+ */
+const WATERMARK_FONT_FRAC = 0.024;
+
+export interface WatermarkLayout {
+  xPx: number;
+  yPx: number;
+  fontPx: number;
+  opacity: number;
+  text: string;
+}
+
+/**
+ * TOP-LEFT of the textual safe area, per shape: 9:16 platforms overlay their
+ * own UI on the right edge (action rail) and the bottom (username/ticker),
+ * and the caption track owns the lower third — top-left is the one corner
+ * nothing else claims. `safeAreaFor` picks the portrait chrome insets or the
+ * landscape title-safe margins by frame shape, the same decision rule the
+ * stage itself uses, so the wordmark can never disagree with the layouts
+ * about where "safe" is.
+ */
+export function watermarkLayout(frame: FrameSize = PORTRAIT_FRAME): WatermarkLayout {
+  const a = safeAreaFor(frame);
+  return {
+    xPx: Math.round(a.left * frame.width),
+    yPx: Math.round(a.top * frame.height),
+    fontPx: Math.round(Math.min(frame.width, frame.height) * WATERMARK_FONT_FRAC),
+    opacity: WATERMARK_OPACITY,
+    text: WATERMARK_TEXT,
+  };
+}
+
+/**
+ * Whether a render-props `watermark` field turns the wordmark on. Strict
+ * `=== true`, not truthiness: every pre-watermark `render-props.json` has no
+ * field at all (undefined → off, so old workdirs render unchanged), and a
+ * hand-edited `"watermark": "yes"` must not coerce a credit on — values from
+ * outside are parsed, never coerced (CLAUDE.md).
+ */
+export function showWatermark(flag: unknown): flag is true {
+  return flag === true;
+}