rvlib-shipkit 0.11.0 → 0.13.0

package/src/serve/hub-app/geometry-view.tsx

@@ -0,0 +1,155 @@
+// Geometry layer — the ground-rect oval + legs overlay on the stage image,
+// plus the rectbar. Ported 1:1 from the deleted vanilla studio SPA: same
+// drag math (move 1:1; resize anchored left-tip + center-y, legs scale),
+// same 250ms debounced save through MediaSvc. Pointer-capture drags mutate
+// the observable rect inside runInAction; the render derives every style
+// from (rect × measured image box).
+import { runInAction } from 'mobx'
+import { observer } from 'mobx-react-lite'
+import { useRef } from 'react'
+import type { HubSt } from './hub-st.ts'
+import type { Leg } from './hub-types.ts'
+
+export type Box = { scale: number; x: number; y: number }
+
+/** vanilla imgBox(): where the letterboxed image actually sits in the stage */
+export function measureBox(stage: HTMLElement | null, img: HTMLImageElement | null): Box | null {
+    if (stage == null || img == null || !img.naturalWidth) return null
+    const b = img.getBoundingClientRect()
+    const st = stage.getBoundingClientRect()
+    const scale = Math.min(b.width / img.naturalWidth, b.height / img.naturalHeight)
+    const w = img.naturalWidth * scale
+    const h = img.naturalHeight * scale
+    return { scale, x: b.left - st.left + (b.width - w) / 2, y: b.top - st.top + (b.height - h) / 2 }
+}
+
+const LEG_TAGS = ['L·front', 'L·back', 'R·back', 'R·front']
+
+type DragStart = { px: number; py: number; x: number; y: number; w: number; legs: Leg[]; cy: number; mode: 'move' | 'resize' }
+
+const LegBox = observer(({ app, box, i, leg }: { app: HubSt; box: Box; i: number; leg: Leg }) => {
+    const m = app.media
+    const start = useRef<{ px: number; py: number; legs: Leg[]; mode: 'move' | 'resize' } | null>(null)
+    const px = (v: number): number => v * box.scale
+    const far = i < 2
+    const rect = m.rect!
+    return (
+        <>
+            <div
+                className={`leg ${far ? 'far' : 'near'}`}
+                style={{ color: far ? 'var(--blue)' : 'var(--red)', left: box.x + px(leg.x), top: box.y + px(leg.y), width: px(leg.w), height: px(leg.h) }}
+                onPointerDown={(e) => {
+                    if (rect.legs == null) return
+                    start.current = { px: e.clientX, py: e.clientY, legs: rect.legs.map((l) => ({ ...l })), mode: (e.target as HTMLElement).classList.contains('lh') ? 'resize' : 'move' }
+                    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+                    e.preventDefault()
+                    e.stopPropagation()
+                }}
+                onPointerMove={(e) => {
+                    const s = start.current
+                    if (s == null || rect.legs == null) return
+                    const dx = (e.clientX - s.px) / box.scale
+                    const dy = (e.clientY - s.py) / box.scale
+                    runInAction(() => {
+                        if (s.mode === 'move') {
+                            const o = s.legs[i]!
+                            rect.legs![i] = { ...o, x: o.x + dx, y: o.y + dy }
+                        } else {
+                            // one size for all 4 — every leg keeps its own FOOT planted
+                            const o = s.legs[i]!
+                            const w = Math.max(6, o.w + dx)
+                            const h = Math.max(6, o.h - dy)
+                            rect.legs = s.legs.map((l) => ({ x: l.x + (l.w - w) / 2, y: l.y + l.h - h, w, h }))
+                        }
+                    })
+                    m.saveRect()
+                }}
+                onPointerUp={() => { start.current = null; m.saveRect() }}
+            >
+                <div className="hip" />
+                <div className="foot" />
+                <div className="tag">{LEG_TAGS[i]}</div>
+                {i === 0 ? <div className="lh" /> : null}
+            </div>
+            <div
+                className={`pill${far ? '' : ' near'}`}
+                style={{ left: box.x + px(leg.x), top: box.y + px(leg.y), width: px(leg.w), height: px(leg.h), background: rect.legColor ?? '#c8a070' }}
+            />
+        </>
+    )
+})
+
+export const GeometryLayer = observer(({ app, box }: { app: HubSt; box: Box | null }) => {
+    const m = app.media
+    const start = useRef<DragStart | null>(null)
+    const rect = m.rect
+    if (!m.hasGeom || rect == null || box == null) return null
+    const px = (v: number): number => v * box.scale
+    return (
+        <>
+            <div className="plumb" style={{ display: 'block', left: box.x + px(rect.x) }} />
+            <div className="plumb" style={{ display: 'block', left: box.x + px(rect.x + rect.w) }} />
+            <div
+                id="ov"
+                style={{ display: 'block', left: box.x + px(rect.x), top: box.y + px(rect.y), width: px(rect.w), height: px(rect.h) }}
+                onPointerDown={(e) => {
+                    start.current = {
+                        px: e.clientX, py: e.clientY, x: rect.x, y: rect.y, w: rect.w,
+                        legs: (rect.legs ?? []).map((l) => ({ ...l })), cy: rect.y + rect.h / 2,
+                        mode: (e.target as HTMLElement).classList.contains('hdl') ? 'resize' : 'move',
+                    }
+                    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+                    e.preventDefault()
+                }}
+                onPointerMove={(e) => {
+                    const s = start.current
+                    if (s == null) return
+                    const dx = (e.clientX - s.px) / box.scale
+                    const dy = (e.clientY - s.py) / box.scale
+                    runInAction(() => {
+                        if (s.mode === 'move') {
+                            rect.x = Math.max(0, s.x + dx)
+                            rect.y = Math.max(0, s.y + dy)
+                            if (s.legs.length > 0) rect.legs = s.legs.map((l) => ({ ...l, x: l.x + (rect.x - s.x), y: l.y + (rect.y - s.y) }))
+                        } else {
+                            // anchored: left edge + center-y; legs scale around the same anchor
+                            rect.w = Math.max(20, s.w + dx)
+                            rect.h = rect.w * m.rectRatio
+                            rect.y = s.cy - rect.h / 2
+                            const f = rect.w / s.w
+                            if (s.legs.length > 0) rect.legs = s.legs.map((l) => ({ x: s.x + (l.x - s.x) * f, y: s.cy + (l.y - s.cy) * f, w: l.w * f, h: l.h * f }))
+                        }
+                    })
+                    m.saveRect()
+                }}
+                onPointerUp={() => { start.current = null; m.saveRect() }}
+            >
+                <div className="hdl" />
+                <div className="arrow" />
+                <div className="sz">{+rect.size.toFixed(2)}m</div>
+            </div>
+            {(rect.legs ?? []).map((l, i) => <LegBox key={i} app={app} box={box} i={i} leg={l} />)}
+        </>
+    )
+})
+
+export const Rectbar = observer(({ app }: { app: HubSt }) => {
+    const m = app.media
+    const rect = m.rect
+    if (!m.hasGeom || rect == null) return null
+    const cx = Math.round(rect.x + rect.w / 2)
+    const cy = Math.round(rect.y + rect.h / 2)
+    return (
+        <div id="rectbar" style={{ display: 'flex' }}>
+            <label>size <input type="number" step={0.1} min={0.1} value={rect.size}
+                onChange={(e) => { runInAction(() => { rect.size = Math.max(0.1, +e.target.value || rect.size) }); m.saveRect() }} /></label>
+            <button className="ghost" onClick={() => void m.legsDefault()}>legs</button>
+            <input type="color" title="leg color" value={/^#[0-9a-f]{6}$/i.test(rect.legColor ?? '') ? rect.legColor : '#c8a070'}
+                onChange={(e) => { runInAction(() => { rect.legColor = e.target.value }); m.saveRect() }} />
+            {rect.legs != null
+                ? <button className="ghost" title="remove legs" onClick={() => { if (confirm('remove all 4 legs?')) m.removeLegs() }}>✕</button>
+                : null}
+            <span className="ro">cx{cx} cy{cy} w{Math.round(rect.w)}px</span>
+        </div>
+    )
+})

package/src/serve/hub-app/health-svc.ts

@@ -0,0 +1,49 @@
+// Health service — STATUS.md + the streaming check runner (the health
+// section's card in THE page).
+import { makeAutoObservable, runInAction } from 'mobx'
+import type { HubSt } from './hub-st.ts'
+
+export class HealthSvc {
+    statusMd: string | null = null
+    running = false
+    note = ''
+
+    constructor(private st: HubSt) {
+        makeAutoObservable<this, 'st'>(this, { st: false })
+    }
+
+    async load(): Promise<void> {
+        try {
+            const s = (await (await fetch('/api/status.json')).json()) as { statusMd: string | null }
+            runInAction(() => { this.statusMd = s.statusMd })
+        } catch (e) {
+            runInAction(() => { this.statusMd = `FAIL status fetch broke: ${(e as Error).message}` })
+        }
+    }
+
+    async runCheck(): Promise<void> {
+        this.running = true
+        this.note = 'running…'
+        let text = ''
+        try {
+            const r = await fetch('/api/check/run', { method: 'POST' })
+            const rd = r.body!.getReader()
+            const dec = new TextDecoder()
+            for (;;) {
+                const { done, value } = await rd.read()
+                if (done) break
+                text += dec.decode(value, { stream: true })
+                runInAction(() => { this.statusMd = text })
+            }
+            runInAction(() => { this.note = 'done — STATUS.md refreshed on disk' })
+            void this.load()
+            void this.st.cols.poll()
+        } catch (e) {
+            runInAction(() => {
+                this.statusMd = `${text}\nFAIL stream broke: ${(e as Error).message}`
+                this.note = 'stream broke'
+            })
+        }
+        runInAction(() => { this.running = false })
+    }
+}