Split UI components into dedicated packages

[jdreetz]

Split UI components into dedicated packages

Extracts watch, publish, and shared UI code out of @moq/hang into their own packages, establishing clearer boundaries between media logic and UI.

Changes

• @moq/ui-core (new) — Shared UI primitives (Button, Icon, Stats panel) used by both watch and publish UIs. Uses structural interfaces for stats provider types to avoid depending on @moq/watch or @moq/hang.
• @moq/watch (new) — Watch/subscribe logic + optional @moq/watch/ui overlay (<hang-watch-ui>), built with Vite + SolidJS.
• @moq/publish (new) — Publish logic + optional @moq/publish/ui overlay (<hang-publish-ui>), built with Vite + SolidJS.
• @moq/hang — Removed all watch/publish/UI code. Now contains only the core media layer: catalog, container (CMAF + Legacy), and utilities.

Build

Each package has two TypeScript configs:

• tsconfig.json — IDE + type-checking (includes UI)
• tsconfig.build.json — Declaration emit only (excludes UI, which Vite handles)

Documentation

• Updated doc/js/ pages and package READMEs to reflect the new structure
• Corrected UI web component examples to show the wrapping pattern
• Fixed license file paths

Nix

• Added git and cmake to flake.nix rustDeps — required by boring-sys to build BoringSSL

[coderabbitai]

Walkthrough

This pull request restructures the package architecture by separating the monolithic @moq/hang-ui package into three distinct packages: @moq/ui-core (containing shared UI primitives), @moq/watch (for subscribing to and rendering broadcasts), and @moq/publish (for publishing media). The @moq/hang package is refactored to focus on core utilities—Catalog, Container, and Support—rather than media-specific watch/publish functionality. All documentation is updated to reflect new module import paths and package relationships. Internal modules across @moq/watch and @moq/publish are updated to import from the refactored @moq/hang core package using scoped imports instead of relative paths.

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title directly and clearly describes the main change: splitting UI components from @moq/hang into separate dedicated packages (@moq/ui-core, @moq/watch, @moq/publish).
Description check	✅ Passed	The description is comprehensive and directly related to the changeset, explaining the rationale, new packages created, removed code from @moq/hang, build changes, documentation updates, and Nix modifications.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 3

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (6)

js/ui-core/vite.config.ts (1)

14-16: ⚠️ Potential issue | 🟡 Minor

Add @moq/watch to rollupOptions.external.

The package @moq/watch is imported in stats/types.ts for type definitions but is not listed in the external array, which could cause it to be bundled into the library output instead of being treated as a peer dependency.

doc/js/@moq/hang/index.md (1)

80-86: ⚠️ Potential issue | 🟡 Minor

Stale links in "Next Steps" section.

Lines 82–83 still point to /js/@moq/hang/watch and /js/@moq/hang/publish, but the "Related Packages" section above correctly links to /js/@moq/watch and /js/@moq/publish. These should be updated to match.

Proposed fix

 ## Next Steps
 
-- Learn about [watching streams](/js/@moq/hang/watch)
-- Learn about [publishing streams](/js/@moq/hang/publish)
+- Learn about [watching streams](/js/@moq/watch)
+- Learn about [publishing streams](/js/@moq/publish)
 - Use [Web Components](/js/env/web)
 - Use [`@moq/lite`](/js/@moq/lite) for custom protocols
 - View [code examples](https://github.com/moq-dev/moq/tree/main/js)

doc/js/@moq/hang/watch.md (2)

60-85: ⚠️ Potential issue | 🟡 Minor

JavaScript API examples still use old @moq/hang import paths.

The Web Component and React/SolidJS sections are updated to @moq/watch, but the JS API examples on lines 61–85 and 130–141 still use import * as Hang from "@moq/hang" and Hang.Watch.Broadcast(...). These should be updated to use @moq/watch to match the rest of this file.

Proposed fix for lines 60-85

 ```typescript
-import * as Hang from "@moq/hang";
+import * as Watch from "@moq/watch";
 
-const connection = new Hang.Connection("https://relay.example.com/anon");
+const connection = new Hang.Connection("https://relay.example.com/anon"); // Connection still from `@moq/hang`
 
-const watch = new Hang.Watch.Broadcast(connection, {
+const watch = new Watch.Broadcast(connection, {
     enabled: true,
     name: "alice",

---

128-141: ⚠️ Potential issue | 🟡 Minor

Same stale Hang.Watch.Broadcast reference in the Track Selection example.

-const watch = new Hang.Watch.Broadcast(connection, {
+const watch = new Watch.Broadcast(connection, {

doc/js/@moq/hang/publish.md (1)

60-87: ⚠️ Potential issue | 🟡 Minor

JavaScript API examples still reference @moq/hang instead of @moq/publish.

Same issue as in the watch doc — the Web Component and framework integration sections are updated to @moq/publish, but the JS API examples throughout (lines 62, 66, 94, 106, 141, 162, 176) still use import * as Hang from "@moq/hang" and Hang.Publish.Broadcast(...). These should be migrated to @moq/watch / @moq/publish for consistency.

doc/js/index.md (1)

25-37: ⚠️ Potential issue | 🟡 Minor

@moq/hang description is stale after the reorganization.

The PR refocuses @moq/hang on core primitives (Catalog, Container, Support), but Lines 29–35 still describe it as a "High-level media library with Web Components." Web Components are now in @moq/watch and @moq/publish. Update this section to reflect the new scope.

🤖 Fix all issues with AI agents

In `@js/publish/README.md`:
- Around line 95-100: The License links in the "## License" section of
js/publish/README.md point to LICENSE-APACHE and LICENSE-MIT in the current
folder but those files live at the repo root; update the links to use the
correct relative paths ("../../LICENSE-APACHE" and "../../LICENSE-MIT") or
alternatively copy the license files into js/publish/ so the existing references
resolve; locate the "## License" header and change the two link targets for
LICENSE-APACHE and LICENSE-MIT accordingly.

In `@js/publish/vite.config.ts`:
- Around line 14-16: The rollupOptions.external array currently only lists
["@moq/hang","@moq/lite","@moq/signals","@moq/ui-core"] and misses externalizing
Solid libraries used by the UI entry points; update the rollupOptions.external
setting (in vite.config.ts) to include "solid-js", "solid-js/web", and
"solid-element" so those runtimes are not bundled into the library output (do
not add "solid-js/store" since it's not used).

In `@js/ui-core/src/stats/types.ts`:
- Around line 3-4: The file imports type symbols from "@moq/watch" (imported as
Watch) creating a circular package dependency between `@moq/ui-core` and
`@moq/watch`; remove the type import from js/ui-core/src/stats/types.ts by moving
the shared types (stats and any backend interfaces referenced here) into
`@moq/ui-core` itself or into a new dedicated package (e.g., `@moq/types`), then
update consumers: export the moved types from the new location and change
`@moq/watch` (and any other package) to import those types from `@moq/ui-core` or
`@moq/types` instead; ensure js/ui-core/src/stats/types.ts no longer references
Watch (or Hang) from `@moq/watch` so dependency flows one-way (watch → ui-core).

🧹 Nitpick comments (5)

js/watch/package.json (1)

28-37: Consider declaring solid-js and solid-element as peerDependencies.

These packages provide the runtime for the Solid-based web components exported via ./ui and ./element. Listing them only as devDependencies means consumers won't be prompted to install them, and the library build may either bundle them (causing duplicates) or fail at runtime. The same applies to js/publish/package.json.

js/ui-core/package.json (1)

22-34: solid-js should be a peer dependency since exports point to raw source files.

The "." export resolves to ./src/index.ts (unbundled source), so consumers must have solid-js available at build time. Keeping it only in devDependencies means consumers won't be warned if it's missing.

Proposed fix

 "peerDependencies": {
 	"@moq/hang": "workspace:^0.1.0",
 	"@moq/signals": "workspace:^0.1.0",
-	"@moq/watch": "workspace:^0.1.0"
+	"@moq/watch": "workspace:^0.1.0",
+	"solid-js": "^1.9.10"
 },

doc/js/@moq/publish.md (1)

15-19: Consider removing the npm alternative per project guidelines.

The coding guidelines specify using bun for all package management. If this doc targets external consumers who may use npm, this is fine — but it's inconsistent with the project convention.

As per coding guidelines: "Use bun for all TypeScript/JavaScript package management and script execution (not npm, yarn, or pnpm)".

js/docs/restructure-plan.md (1)

34-44: Missing language specifier on fenced code block.

The dependency graph code block should specify a language (e.g., text or plaintext) to satisfy linting and improve rendering.

-```
+```text
 `@moq/lite`  ←─────────────────────────────┐

js/ui-core/src/stats/types.ts (1)

21-31: The TODO on line 28 is worth addressing now.

The comment asks whether to use Watch.Backend instead of separately typing Watch.Audio.Backend and Watch.Video.Backend in ProviderProps. Since this file is being actively refactored, it would be a good time to clarify the intent and either resolve the TODO or convert it to a tracked issue.

Would you like me to open an issue to track this TODO?

[coderabbitai]

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# First, check package.json to see if solid-js is a dev or regular dependency
echo "=== Checking package.json dependencies ==="
jq '.dependencies, .devDependencies' package.json | grep -A 5 -B 5 "solid" || echo "Checking structure..."

echo ""
echo "=== Finding all vite.config files ==="
fd "vite.config" --type f

echo ""
echo "=== Checking current external configurations in vite.config files ==="
fd "vite.config" --type f -x cat {}

echo ""
echo "=== Checking for solid imports in source files ==="
rg "from ['\"]solid" js/publish/src/ js/watch/src/ js/ui-core/src/ --type ts --type tsx -n 2>/dev/null || echo "No direct matches found"

Repository: moq-dev/moq

Length of output: 2434

---

🏁 Script executed:

#!/bin/bash
# Check the full dependency structure
echo "=== Root package.json dependencies and devDependencies ==="
cat package.json | jq '.dependencies, .devDependencies' 2>/dev/null | head -100

echo ""
echo "=== Check workspace packages ==="
# Look for workspace packages that might have their own package.json
fd "package.json" js/ --max-depth 2

echo ""
echo "=== Search for solid in entire js directory ==="
rg "solid" js/ --type json --type ts --type tsx -c 2>/dev/null | head -20

echo ""
echo "=== Check js/publish/src for all imports ==="
find js/publish/src -type f \( -name "*.ts" -o -name "*.tsx" \) -exec echo "File: {}" \; -exec head -30 {} \;

Repository: moq-dev/moq

Length of output: 32592

---

🏁 Script executed:

#!/bin/bash
# Check individual package.json files for solid dependencies
echo "=== js/publish/package.json ==="
cat js/publish/package.json | jq '.dependencies, .devDependencies, .peerDependencies' 2>/dev/null

echo ""
echo "=== js/ui-core/package.json ==="
cat js/ui-core/package.json | jq '.dependencies, .devDependencies, .peerDependencies' 2>/dev/null

echo ""
echo "=== js/watch/package.json ==="
cat js/watch/package.json | jq '.dependencies, .devDependencies, .peerDependencies' 2>/dev/null

echo ""
echo "=== List all solid imports found ==="
rg "from ['\"]solid" js/publish/src/ js/watch/src/ js/ui-core/src/ --type tsx --type ts -A 1 2>/dev/null | head -50

Repository: moq-dev/moq

Length of output: 1252

---

🏁 Script executed:

#!/bin/bash
# Check which solid-js entry points are imported
echo "=== Checking for solid-js/store imports ==="
rg "solid-js/store" js/ --type tsx --type ts 2>/dev/null || echo "No solid-js/store imports found"

echo ""
echo "=== All solid entry point imports ==="
rg "from ['\"]solid" js/ --type tsx --type ts -o 2>/dev/null | sort -u

echo ""
echo "=== Check if any dist files exist ==="
find js/publish/dist js/watch/dist js/ui-core/dist -type f 2>/dev/null | head -20 || echo "No dist files found"

Repository: moq-dev/moq

Length of output: 208

---

🏁 Script executed:

#!/bin/bash
# Look at the actual imports in UI component files
echo "=== Solid imports in js/publish/src/ui/index.tsx ==="
grep -n "from ['\"]solid" js/publish/src/ui/index.tsx

echo ""
echo "=== Solid imports in js/publish/src/ui/context.tsx ==="
grep -n "from ['\"]solid" js/publish/src/ui/context.tsx

echo ""
echo "=== All files with solid imports ==="
grep -r "from ['\"]solid" js/publish/src/ui/ js/watch/src/ui/ 2>/dev/null | cut -d: -f1 | sort -u

echo ""
echo "=== Summary of what is exported from vite config entry points ==="
echo "js/publish builds ui/index entry which exports:"
head -50 js/publish/src/ui/index.tsx | tail -30

echo ""
echo "js/watch builds ui/index entry which exports:"
head -50 js/watch/src/ui/index.tsx | tail -30

Repository: moq-dev/moq

Length of output: 2847

---

Externalize solid-js and solid-element in vite.config for UI builds.

Both js/publish and js/watch export UI entry points that depend on solid-js and solid-element (imported as customElement, createSignal, Show, etc.), but these devDependencies are not externalized. Bundling them into the library output will cause duplicate runtimes for consumers. Include only the imported entry points: "solid-js", "solid-js/web", and "solid-element" (omit solid-js/store, which is not used).

Proposed fix

 		rollupOptions: {
-			external: ["@moq/hang", "@moq/lite", "@moq/signals", "@moq/ui-core"],
+			external: ["@moq/hang", "@moq/lite", "@moq/signals", "@moq/ui-core", "solid-js", "solid-js/web", "solid-element"],
 		},

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	rollupOptions: {
	external: ["@moq/hang", "@moq/lite", "@moq/signals", "@moq/ui-core"],
	},
	rollupOptions: {
	external: ["@moq/hang", "@moq/lite", "@moq/signals", "@moq/ui-core", "solid-js", "solid-js/web", "solid-element"],
	},

🤖 Prompt for AI Agents

In `@js/publish/vite.config.ts` around lines 14 - 16, The rollupOptions.external
array currently only lists
["@moq/hang","@moq/lite","@moq/signals","@moq/ui-core"] and misses externalizing
Solid libraries used by the UI entry points; update the rollupOptions.external
setting (in vite.config.ts) to include "solid-js", "solid-js/web", and
"solid-element" so those runtimes are not bundled into the library output (do
not add "solid-js/store" since it's not used).

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@js/watch/README.md`:
- Around line 101-102: Update the two license URLs in README lines containing
"Apache License, Version 2.0" and "MIT license" to use HTTPS instead of HTTP;
replace "http://www.apache.org/licenses/LICENSE-2.0" with
"https://www.apache.org/licenses/LICENSE-2.0" and
"http://opensource.org/licenses/MIT" with "https://opensource.org/licenses/MIT"
so both links are secure and consistent.

🧹 Nitpick comments (4)

js/ui-core/src/stats/types.ts (2)

7-9: Consider exporting Peekable<T> for consumer convenience.

Peekable<T> is used in all exported interfaces (AudioBackend, VideoBackend) but isn't exported itself. Consumers who need to construct objects conforming to these interfaces (e.g., in tests or custom backends) would benefit from being able to reference this type directly rather than re-declaring it.

♻️ Suggested change

-interface Peekable<T> {
+export interface Peekable<T> {
 	peek(): T;
 }

---

21-27: source.track typed as Peekable<unknown> loses type safety.

Other fields use specific shapes (e.g., config has sampleRate, numberOfChannels, codec), but track is Peekable<unknown>. If stats providers actually read properties from the track value, this forces unsafe casts downstream. If the track is only checked for presence/absence, unknown is acceptable.

js/ui-core/src/index.ts (1)

4-4: AudioBackend and VideoBackend are not re-exported but are part of the public API surface.

ProviderProps references AudioBackend and VideoBackend, so consumers who need to type individual backend parameters (e.g., passing just the audio backend to a helper) can't import those types from @moq/ui-core.

♻️ Suggested change

-export type { KnownStatsProviders, ProviderContext, ProviderProps } from "./stats/types";
+export type { AudioBackend, KnownStatsProviders, Peekable, ProviderContext, ProviderProps, VideoBackend } from "./stats/types";

js/watch/src/ui/components/BufferControl.tsx (1)

39-43: Consider extracting color literals to named constants.

The hex color strings are used as semantic indicators (red = buffering, yellow = gap, green = healthy) but are inline magic values. Named constants would improve readability.

As per coding guidelines: "Avoid using magic numbers; use named constants instead."

♻️ Suggested change

+const BUFFER_COLOR_BUFFERING = "#f87171"; // red
+const BUFFER_COLOR_GAP = "#facc15";       // yellow
+const BUFFER_COLOR_HEALTHY = "#4ade80";   // green
+
 const rangeColor = (index: number, isBuffering: boolean) => {
-	if (isBuffering) return "#f87171"; // red
-	if (index > 0) return "#facc15"; // yellow
-	return "#4ade80"; // green
+	if (isBuffering) return BUFFER_COLOR_BUFFERING;
+	if (index > 0) return BUFFER_COLOR_GAP;
+	return BUFFER_COLOR_HEALTHY;
 };

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Use HTTPS for license URLs.
The license links currently use http. Prefer https for security and consistency.

Suggested fix

--   Apache License, Version 2.0 ([LICENSE-APACHE](../../LICENSE-APACHE) or http://www.apache.org/licenses/LICENSE-2.0)
--   MIT license ([LICENSE-MIT](../../LICENSE-MIT) or http://opensource.org/licenses/MIT)
+-   Apache License, Version 2.0 ([LICENSE-APACHE](../../LICENSE-APACHE) or https://www.apache.org/licenses/LICENSE-2.0)
+-   MIT license ([LICENSE-MIT](../../LICENSE-MIT) or https://opensource.org/licenses/MIT)

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	- Apache License, Version 2.0 ([LICENSE-APACHE](../../LICENSE-APACHE) or http://www.apache.org/licenses/LICENSE-2.0)
	- MIT license ([LICENSE-MIT](../../LICENSE-MIT) or http://opensource.org/licenses/MIT)
	- Apache License, Version 2.0 ([LICENSE-APACHE](../../LICENSE-APACHE) or https://www.apache.org/licenses/LICENSE-2.0)
	- MIT license ([LICENSE-MIT](../../LICENSE-MIT) or https://opensource.org/licenses/MIT)

🤖 Prompt for AI Agents

In `@js/watch/README.md` around lines 101 - 102, Update the two license URLs in
README lines containing "Apache License, Version 2.0" and "MIT license" to use
HTTPS instead of HTTP; replace "http://www.apache.org/licenses/LICENSE-2.0" with
"https://www.apache.org/licenses/LICENSE-2.0" and
"http://opensource.org/licenses/MIT" with "https://opensource.org/licenses/MIT"
so both links are secure and consistent.

[kixelated]

Oh sorry, the Nix stuff should have been fixed by #952, but it's still good to have. The quiche backend doesn't quite work so I disabled it by default.

[kixelated]

Feels bad. Maybe just export util?

We could make separate packages for stuff like libav I guess.
Other stuff you could probably just copy-paste (ex. hex). Not a huge deal.

[kixelated]

hmm maybe this should be in ui instead.

[kixelated]

nit: @moq/theme?