@norskvideo/ctl-dev-kit 0.1.98 → 0.1.99

package/create-product/create-product.ts

@@ -23,7 +23,7 @@ export type ProductShape = "backend-turnkey" | "turnkey";
 
 // - components  the components/ workspace: custom Studio nodes packed into the
 //               product-template tar (all three UI surfaces need one).
-// - views       the operator screen AS component summary/fullscreen React
+// - views       the operator screen AS component inline/summary/fullscreen React
 //               rendered inside Studio's own workflow view (oracle).
 // - dashboard   the operator screen as a standalone SPA built into
 //               dashboards/<workflow>/ and served by Studio (funke, probe).

package/create-product/features/components.ts

@@ -415,7 +415,7 @@ function exampleInfoTs(ctx: ShapeContext): string {
   // insertion point cannot produce a lint-clean file.
   const infoImports = [
     'import type Registration from "@norskvideo/norsk-studio/lib/extension/registration";',
-    ...(hasViews ? [VIEWS_INFO_IMPORTS.fullscreen] : []),
+    ...(hasViews ? [VIEWS_INFO_IMPORTS.fullscreen, VIEWS_INFO_IMPORTS.inline] : []),
     'import type { ExampleCommand, ExampleEvent, ExampleSettings, ExampleState } from "./runtime";',
     ...(hasViews ? [VIEWS_INFO_IMPORTS.summary] : []),
   ].join("\n");

package/create-product/features/views.ts

@@ -1,7 +1,8 @@
 // The `views` feature: the operator screen as React rendered INSIDE Studio's
-// own workflow view — a `summary` on the node itself and a `fullscreen` page
-// at /live/<id>/fullscreen — rather than as a standalone SPA (see dashboard.ts
-// for that answer).
+// own workflow view — one file per place Studio shows a component: `inline`
+// inside its node on the canvas, `summary` in the sidebar when the node is
+// selected, and a `fullscreen` page at /live/<id>/fullscreen — rather than as a
+// standalone SPA (see dashboard.ts for that answer).
 //
 // It costs no vite workspace and no dashboards/ directory: the screens are
 // compiled into the component's info.client.js by copy-yamls. What it does
@@ -14,15 +15,16 @@
 // sendCommand, so a view never fetches and never opens a socket.
 import type { GeneratedFile, ShapeContext } from "../create-product.ts";
 
-const SUMMARY_TSX = `// PLACEHOLDER — the compact view Studio renders on the node in the workflow
-// graph. Keep it to a line or two: the fullscreen view is where detail belongs.
+const INLINE_TSX = `// PLACEHOLDER — rendered INSIDE the component's node on the canvas. Keep it to a
+// line or two: the node is small, and without this view the node shows only its
+// static config. The sidebar is summary.tsx; the full page is fullscreen.tsx.
 //
 // \`state\` is pushed by Studio from the component's updates.update() calls; this
 // file neither fetches nor subscribes.
 import type { ViewProps } from "@norskvideo/norsk-studio/lib/extension/client-types";
 import type { ExampleCommand, ExampleSettings, ExampleState } from "./runtime";
 
-function SummaryView({ state }: ViewProps<ExampleSettings, ExampleState, ExampleCommand>) {
+function InlineView({ state }: ViewProps<ExampleSettings, ExampleState, ExampleCommand>) {
   return (
     <div className="text-sm text-gray-700 dark:text-gray-300">
       <span className="font-medium text-gray-900 dark:text-white tabular-nums">{state.ticks}</span> ticks
@@ -30,6 +32,29 @@ function SummaryView({ state }: ViewProps<ExampleSettings, ExampleState, Example
   );
 }
 
+export default InlineView;
+`;
+
+const SUMMARY_TSX = `// PLACEHOLDER — rendered in Studio's SIDEBAR when the component's node is
+// selected. More room than the node itself (inline.tsx); the fullscreen view is
+// still where full detail belongs.
+//
+// \`state\` is pushed by Studio from the component's updates.update() calls; this
+// file neither fetches nor subscribes.
+import type { ViewProps } from "@norskvideo/norsk-studio/lib/extension/client-types";
+import type { ExampleCommand, ExampleSettings, ExampleState } from "./runtime";
+
+function SummaryView({ state, config }: ViewProps<ExampleSettings, ExampleState, ExampleCommand>) {
+  return (
+    <dl className="grid grid-cols-2 gap-1 text-sm">
+      <dt className="text-gray-500 dark:text-gray-400">Heartbeats</dt>
+      <dd className="tabular-nums text-gray-900 dark:text-white">{state.ticks}</dd>
+      <dt className="text-gray-500 dark:text-gray-400">Interval</dt>
+      <dd className="tabular-nums text-gray-900 dark:text-white">{config.heartbeatMs ?? 1000} ms</dd>
+    </dl>
+  );
+}
+
 export default SummaryView;
 `;
 
@@ -69,20 +94,23 @@ export default FullscreenView;
 
 export function viewsFiles(_ctx: ShapeContext): GeneratedFile[] {
   return [
+    { path: "components/src/library/example/inline.tsx", content: INLINE_TSX },
     { path: "components/src/library/example/summary.tsx", content: SUMMARY_TSX },
     { path: "components/src/library/example/fullscreen.tsx", content: FULLSCREEN_TSX },
   ];
 }
 
-/** Imports the component's info.ts needs when it registers the two views. Kept
+/** Imports the component's info.ts needs when it registers the three views. Kept
  *  separate because biome sorts them around the ./runtime import between them. */
 export const VIEWS_INFO_IMPORTS = {
   fullscreen: 'import FullscreenView from "./fullscreen";',
+  inline: 'import InlineView from "./inline";',
   summary: 'import SummaryView from "./summary";',
 };
 
 /** The `runtime:` entries registering them. */
-export const VIEWS_INFO_RUNTIME = `      summary: SummaryView,
+export const VIEWS_INFO_RUNTIME = `      inline: InlineView,
+      summary: SummaryView,
       fullscreen: FullscreenView,
 `;
 

package/create-product/turnkey.ts

@@ -67,8 +67,11 @@ a fresh repo proves the pipeline on its first launch. Replace it or delete it.
   if (ctx.features.has("views")) {
     sections.push(`### The operator screen — component views
 
-\`summary.tsx\` / \`fullscreen.tsx\` beside the component, registered under its
-\`runtime\` and rendered INSIDE Studio's workflow view. State arrives as
+\`inline.tsx\` / \`summary.tsx\` / \`fullscreen.tsx\` beside the component, registered
+under its \`runtime\` and rendered INSIDE Studio's workflow view: \`inline\` inside
+the node on the canvas (without it the node shows only static config),
+\`summary\` in the sidebar when the node is selected, \`fullscreen\` as the full
+page. State arrives as
 \`ViewProps.state\` (pushed from every \`updates.update()\`) and commands leave
 through \`sendCommand\` — a view never fetches and never opens a socket.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norskvideo/ctl-dev-kit",
-  "version": "0.1.98",
+  "version": "0.1.99",
   "type": "module",
   "exports": {
     "./create-product": "./create-product/create-product.ts",