Extract shared home and environment settings for product reuse

apps/catalog/src/CatalogApp.tsx

@@ -82,6 +82,7 @@ import {
   type StoredLayout,
 } from "./designProfile.js";
 import { FoundrySettingsModal } from "./FoundrySettingsModal.js";
+import { EnvironmentCatalogDemo } from "./EnvironmentCatalogDemo.js";
 
 type CatalogSection = "controls" | "media" | "glass" | "status" | "modals" | "icons";
 type StudioContext = "visual" | "pages" | "applications";
@@ -1427,6 +1428,9 @@ export function CatalogApp() {
               <SettingsCard title="Устройства не обнаружены" description="Подключите устройство, чтобы оно появилось в списке." />
               <SettingsCard align="center" role="status" title="Настройки применены" description="Проверьте подключение устройства." />
             </Preview>
+            <Preview title="Главная и окружение" note="единые компоненты · сохранение в памяти каталога">
+              <EnvironmentCatalogDemo />
+            </Preview>
             <Preview title="Оконные действия" note="круг `46 px`" className="catalog-preview--compact">
               <div className="catalog-window-actions-demo">
                 <Button shape="pill" icon={<Icon name="refresh" />}>Обновить источник</Button>

apps/catalog/src/EnvironmentCatalogDemo.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useRef, useState } from "react";
+import type { EnvironmentSettings } from "@nodedc/ui-core";
+import { Button, EnvironmentSettingsWindow, LandingStage, UserProfileMenu } from "@nodedc/ui-react";
+
+const initial: EnvironmentSettings = { revision: 0, pages: { home: {
+  headerLabel: "Продукт", eyebrow: "NODE.DC / ГЛАВНАЯ", title: "Главная продукта",
+  description: "Общая композиция страницы и настроек окружения.", primaryWorkspaceId: null, secondaryWorkspaceId: null,
+  background: { enabled: false, imageDurationSeconds: 10, items: [] },
+} } };
+
+export function EnvironmentCatalogDemo() {
+  const [open, setOpen] = useState(false);
+  const [settings, setSettings] = useState(initial);
+  const urls = useRef<string[]>([]);
+  useEffect(() => () => urls.current.forEach(url => URL.revokeObjectURL(url)), []);
+  return <>
+    <div className="catalog-environment-actions">
+      <UserProfileMenu displayName="DC" subtitle="Каталог компонентов" triggerLabel={null}
+        actions={[{ id: "settings", label: "Настройки", icon: "settings", onSelect: () => setOpen(true) }]} />
+      <Button variant="primary" tone="neutral" onClick={() => setOpen(true)}>Настройки окружения</Button>
+      <Button variant="primary" tone="neutral" disabled>Неактивное действие</Button>
+    </div>
+    <div className="catalog-environment-stage"><LandingStage page={settings.pages.home} /></div>
+    <EnvironmentSettingsWindow open={open} onClose={() => setOpen(false)} productName="Продукт"
+      surfaces={[{ id: "home", home: true, description: "Главная страница продукта", actions: [] }]}
+      settings={settings} state="ready" error={null}
+      onSave={async draft => { const next = { ...draft, revision: draft.revision + 1 }; setSettings(next); return next; }}
+      onUpload={async (_surface, _item, file) => {
+        const url = URL.createObjectURL(file); urls.current.push(url);
+        return { url, fileName: file.name, mediaKind: file.type.startsWith("video/") ? "video" : "image" };
+      }} />
+  </>;
+}

apps/catalog/src/styles.css

@@ -1,3 +1,6 @@
+.catalog-environment-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
+.catalog-environment-stage { display: grid; width: 100%; min-height: 480px; }
+
 :root {
   background: var(--nodedc-canvas);
 }