feat(ui): add bounded workspace windows

apps/catalog/src/styles.css

@@ -897,6 +897,65 @@ textarea {
   grid-column: 1 / -1;
 }
 
+.catalog-workspace-window-preview .catalog-preview__body {
+  align-content: stretch;
+}
+
+.catalog-workspace-window-demo {
+  position: relative;
+  min-height: 24rem;
+  overflow: hidden;
+  border-radius: var(--nodedc-radius-card);
+  background:
+    linear-gradient(color-mix(in srgb, var(--nodedc-text-primary) 5%, transparent) 1px, transparent 1px),
+    linear-gradient(90deg, color-mix(in srgb, var(--nodedc-text-primary) 5%, transparent) 1px, transparent 1px),
+    color-mix(in srgb, var(--nodedc-canvas) 88%, var(--nodedc-glass-panel-bg-soft));
+  background-size: 2.5rem 2.5rem;
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nodedc-text-primary) 8%, transparent);
+}
+
+.catalog-workspace-window-demo .nodedc-workspace-window__body {
+  display: grid;
+  padding: 0.25rem 0.75rem 0.5rem;
+}
+
+.catalog-workspace-window-demo__media {
+  display: grid;
+  min-height: 0;
+  place-content: center;
+  justify-items: center;
+  gap: 0.45rem;
+  border-radius: calc(var(--nodedc-radius-card) * 0.72);
+  background:
+    radial-gradient(circle at 62% 30%, color-mix(in srgb, rgb(var(--nodedc-accent-rgb)) 18%, transparent), transparent 38%),
+    color-mix(in srgb, var(--nodedc-canvas) 72%, transparent);
+  color: var(--nodedc-text-secondary);
+  text-align: center;
+}
+
+.catalog-workspace-window-demo__media strong {
+  color: var(--nodedc-text-primary);
+  font-size: 0.82rem;
+}
+
+.catalog-workspace-window-demo__media span,
+.catalog-workspace-window-demo__hint {
+  color: var(--nodedc-text-muted);
+  font-size: 0.66rem;
+  line-height: 1.4;
+}
+
+.catalog-workspace-window-demo__media span {
+  max-width: 16rem;
+}
+
+.catalog-workspace-window-demo__reopen {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
 .catalog-inspector-launcher .nodedc-button {
   width: 100%;
 }