4d:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4e:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 4f:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 50:T10bc,/** * Universal widget view component. * * Routes widget models to the appropriate renderer: * - anywidgets (with _esm field) → AnyWidgetView * - Built-in widgets → shadcn-backed components * - Unknown widgets → UnsupportedWidget fallback */ import { cn } from "@/lib/utils"; import { ErrorBoundary } from "@/registry/lib/error-boundary"; import { WidgetErrorFallback } from "@/registry/lib/widget-error-fallback"; import { AnyWidgetView, isAnyWidget } from "./anywidget-view"; import { useLayoutStyles } from "./use-layout-styles"; import { getWidgetComponent } from "./widget-registry"; import type { WidgetModel } from "./widget-store"; import { useWasWidgetClosed, useWidgetModel } from "./widget-store-context"; // === Props === export interface WidgetViewProps { /** The model ID (comm_id) of the widget to render */ modelId: string; /** Optional className for the container */ className?: string; } // === Fallback Components === function LoadingWidget({ modelId, className }: WidgetViewProps) { return (

Loading widget...

); } interface UnsupportedWidgetProps extends WidgetViewProps { model: WidgetModel; } function UnsupportedWidget({ model, className }: UnsupportedWidgetProps) { return (

Unsupported widget: {model.modelName}

Module: {model.modelModule || "unknown"}

); } // === Main Component === /** * Universal widget view that routes to the appropriate renderer. * * @example * ```tsx * * * * ``` */ export function WidgetView({ modelId, className }: WidgetViewProps) { const model = useWidgetModel(modelId); const wasClosed = useWasWidgetClosed(modelId); // Get child layout styles (grid_area for positioning within grid containers) const { childStyle } = useLayoutStyles(modelId); // Model was explicitly closed (e.g., tqdm with leave=False) - render nothing if (wasClosed) { return null; } // Model not loaded yet - show loading state if (!model) { return ; } // Determine the rendered widget content let renderedWidget: React.ReactNode; // anywidgets have _esm field - render with ESM loader if (isAnyWidget(model)) { renderedWidget = ; } else { // Check for built-in widget component const WidgetComponent = getWidgetComponent(model.modelName); if (WidgetComponent) { renderedWidget = ( ); } else { // No handler found renderedWidget = ( ); } } // Wrap with ErrorBoundary for fault isolation const wrappedWidget = ( ( )} onError={(error, errorInfo) => { console.error( `[WidgetView] Error rendering widget ${modelId}:`, error, errorInfo.componentStack, ); }} > {renderedWidget} ); // Wrap with layout positioning if the widget has grid placement styles const hasChildStyles = Object.keys(childStyle).length > 0; if (hasChildStyles) { return

{wrappedWidget}

; } return wrappedWidget; } export default WidgetView; 51:T49a,/** * Registry mapping widget model names to React components. * * This maps _model_name from ipywidgets to our shadcn-backed implementations. */ import type { ComponentType } from "react"; export interface WidgetComponentProps { /** The model ID (comm_id) of the widget */ modelId: string; /** Optional className for styling */ className?: string; } /** * Registry of model names to widget components. * Components are loaded lazily to avoid bundling unused widgets. */ export const WIDGET_REGISTRY: Record< string, ComponentType > = {}; /** * Register a widget component for a model name. */ export function registerWidget( modelName: string, component: ComponentType, ): void { WIDGET_REGISTRY[modelName] = component; } /** * Get the component for a model name, if registered. */ export function getWidgetComponent( modelName: string, ): ComponentType | undefined { return WIDGET_REGISTRY[modelName]; } /** * Check if a model name has a registered component. */ export function hasWidgetComponent(modelName: string): boolean { return modelName in WIDGET_REGISTRY; } 49:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L4d",null,{"registryDependencies":["@nteract/widget-store","@nteract/anywidget-view","@nteract/error-boundary"]}]]}],["$","$L4e",null,{"sourceUrl":"https://nteract-elements.vercel.app/r/widget-view.json","proxyUrl":"https://shadcnregistry.com/r/nteract/widget-view","itemId":"@nteract/widget-view"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L4f",null,{"files":[{"path":"registry/widgets/widget-view.tsx","content":"$50","type":"registry:lib","target":"components/widgets/widget-view.tsx"},{"path":"registry/widgets/widget-registry.ts","content":"$51","type":"registry:lib","target":"components/widgets/widget-registry.ts"}]}]]}],"$L52"]}]

Widget View

Installation

Files

components

Styles