diff --git a/apps/catalog/src/CatalogApp.tsx b/apps/catalog/src/CatalogApp.tsx index b97f582..6cbdb99 100644 --- a/apps/catalog/src/CatalogApp.tsx +++ b/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() { + + +
diff --git a/apps/catalog/src/EnvironmentCatalogDemo.tsx b/apps/catalog/src/EnvironmentCatalogDemo.tsx new file mode 100644 index 0000000..a554711 --- /dev/null +++ b/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([]); + useEffect(() => () => urls.current.forEach(url => URL.revokeObjectURL(url)), []); + return <> +
+ setOpen(true) }]} /> + + +
+
+ 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" }; + }} /> + ; +} diff --git a/apps/catalog/src/styles.css b/apps/catalog/src/styles.css index b876690..e517c63 100644 --- a/apps/catalog/src/styles.css +++ b/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); } diff --git a/docs/ADOPTION.md b/docs/ADOPTION.md index 6ecb640..2b2e607 100644 --- a/docs/ADOPTION.md +++ b/docs/ADOPTION.md @@ -74,3 +74,12 @@ - не поддерживать отдельную тему путём fork компонента; - не использовать legacy Engine inspector как промежуточный канон; - не удалять production local component до проверки package replacement. +# Mission Core and onboard Home (R17) + +Mission Core and Mission Core Node consume `EnvironmentSettingsWindow`, +`EnvironmentMediaPlaylistEditor`, `EnvironmentBackgroundMedia` and `LandingStage` +from `@nodedc/ui-react`. The former Control Station files are thin API/product +registry adapters or compatibility re-exports. They own no copied form markup or +presentation CSS. Node supplies Home only; Core retains all existing pages and +its wire/storage schema. Both use the existing `UserProfileMenu` avatar dropdown. +The component contract and catalog example are in `ENVIRONMENT_SETTINGS.md`. diff --git a/docs/COMPONENTS.md b/docs/COMPONENTS.md index a12060f..1fafe11 100644 --- a/docs/COMPONENTS.md +++ b/docs/COMPONENTS.md @@ -341,3 +341,13 @@ Engine продолжает владеть определениями полей StatusBadge `variant="indicator"` отображает только одну лампу состояния. Передавайте `aria-label` и `title`; дополнительный текст и значки скрываются. + +## EnvironmentSettingsWindow и EnvironmentMediaPlaylistEditor + +Единый редактор окружения перенесён из принятой композиции Mission Core. Принимает страницы, quick-action варианты, документ, состояние, upload/save adapters и название продукта. Использует тот же FeatureSettingsWindow, поля, переключатели, медиаконтент и перестановку; новое приложение передаёт данные, а не копирует форму. Для бортового приложения передаётся только home. Контракты и пример: [ENVIRONMENT_SETTINGS.md](ENVIRONMENT_SETTINGS.md). + +## LandingStage и EnvironmentBackgroundMedia + +Общая главная: надзаголовок, заголовок, описание, быстрые действия, фон и необязательные status/footer slots. Изображения меняются по таймеру, видео — после завершения; ошибочные источники пропускаются. Пустой фон однотонный, без декоративного круга. Состояние страниц и хранение принадлежат приложению. + +Для primary Button `tone="neutral"` фиксирует белый enabled и серый disabled, независимо от темы и акцента; keyboard focus остаётся видимым. MediaSourceField принимает `disabled` и блокирует все операции выбора источника, пока родитель сохраняет документ или загружает файл. diff --git a/docs/ENVIRONMENT_SETTINGS.md b/docs/ENVIRONMENT_SETTINGS.md new file mode 100644 index 0000000..158b72c --- /dev/null +++ b/docs/ENVIRONMENT_SETTINGS.md @@ -0,0 +1,19 @@ +# Shared environment and home + +The owner-approved Mission Core settings anatomy is now canonical, not a screenshot to reproduce. Consumers use UserProfileMenu for the avatar dropdown, EnvironmentSettingsWindow for the settings composition, EnvironmentMediaPlaylistEditor for the list and LandingStage/EnvironmentBackgroundMedia for the home. All geometry and responsive styles live in ui-core. + +The neutral primary Button tone comes from shared tokens, stays white when enabled and gray when disabled across dark/light and accent changes. It does not alter other applications' default primary theme. + +## Consumer contract + +Pass productName, a nonempty stable surfaces list, optional initialSurfaceId, a revision/pages document and save/upload adapters. Each surface references one present page and declares its available quick actions. Workspace IDs are opaque application-owned identifiers. The library owns only draft/form/list/playback behavior; it never imports Mission Core's registry or calls product APIs. Shared data shapes/list functions are exported by ui-core so nonvisual application contracts do not depend on React. + +Settings uses the existing FeatureSettingsWindow/Window focus and Escape behavior. A busy parent disables editing and save; failed saves retain the draft. Each playlist has up to 24 items. Images use the configured delay; a video advances on ended, with one video looping. Failed media is skipped. List display reverses playback order to keep newly added media at the top, as in the accepted source UI. + +The application validates URLs/media bytes, persists uploads and document revisions, handles authentication and rejects stale saves. An upload response provides URL, fileName and mediaKind. A file URL belongs to the storage adapter; an external source must use HTTP(S). No media defaults to an invented graphic. The product may supply status/footer slots without forking the stage. + +## Adoption and validation + +Mission Core passes all existing page definitions and its current operator-environment API. Mission Core Node passes home only and authenticated local presentation storage. Device control never depends on this document. The catalog EnvironmentCatalogDemo exercises the same exported components with an explicitly in-memory save/upload adapter; it is not a persistence service. + +Validate the source migration, TypeScript builds, playlist functions, neutral enabled/disabled DOM contract, dark/light and multiple accents, modal Escape, media order/timing and both consumer persistence adapters. Long-running or physical device acceptance remains application-owned. diff --git a/package.json b/package.json index 5ae5655..2647b81 100644 --- a/package.json +++ b/package.json @@ -11,10 +11,11 @@ "scripts": { "build": "npm run build --workspace @nodedc/ui-core && npm run build --workspace @nodedc/ui-dom && npm run build --workspace @nodedc/ui-react && npm run build --workspace @nodedc/page-patterns && npm run build --workspace @nodedc/map-cesium-react && npm run build --workspace @nodedc/ui-catalog", "build:packages": "npm run build --workspace @nodedc/ui-core && npm run build --workspace @nodedc/ui-dom && npm run build --workspace @nodedc/ui-react && npm run build --workspace @nodedc/page-patterns && npm run build --workspace @nodedc/map-cesium-react", - "check": "npm run build:packages && npm run typecheck --workspaces --if-present && npm run validate:registry && npm run test:spark-governance && npm run test:activity-indicator && npm run test:control-density && npm run test:icon-contract && npm run test:toast-contract && npm run test:floating-position && npm run test:inspector-select && npm run test:range-control && npm run test:split-pane && npm run test:hgeozone-projection && npm run test:map-grid-lod && npm run test:map-filters && npm run test:map-object-layers && npm run test:map-inspector-overlay-state && npm run test:map-reference-stations && npm run test:map-search && npm run test:map-subject-card && npm run test:map-subject-detail-profile", + "check": "npm run build:packages && npm run typecheck --workspaces --if-present && npm run validate:registry && npm run test:spark-governance && npm run test:activity-indicator && npm run test:control-density && npm run test:icon-contract && npm run test:toast-contract && npm run test:floating-position && npm run test:inspector-select && npm run test:range-control && npm run test:split-pane && npm run test:hgeozone-projection && npm run test:map-grid-lod && npm run test:map-filters && npm run test:map-object-layers && npm run test:map-inspector-overlay-state && npm run test:map-reference-stations && npm run test:map-search && npm run test:map-subject-card && npm run test:map-subject-detail-profile && npm run test:environment-settings", "dev": "npm run build:packages && npm run dev --workspace @nodedc/ui-catalog", "serve": "node server/catalog-server.mjs", "validate:registry": "node scripts/validate-registry.mjs", + "test:environment-settings": "node --test scripts/environment-settings.test.mjs", "test:platform-settings": "node scripts/smoke-platform-settings.mjs", "test:data-product-runtime": "node scripts/smoke-data-product-runtime.mjs", "test:data-product-consumer": "node --test server/foundry-data-product-consumer.test.mjs", diff --git a/packages/tokens/themes.css b/packages/tokens/themes.css index 283c1ba..19efd01 100644 --- a/packages/tokens/themes.css +++ b/packages/tokens/themes.css @@ -1,3 +1,11 @@ +:root { + --nodedc-neutral-action-bg: rgba(247, 248, 244, 0.96); + --nodedc-neutral-action-hover: #fff; + --nodedc-neutral-action-color: rgba(8, 8, 10, 0.96); + --nodedc-neutral-action-disabled-bg: #757575; + --nodedc-neutral-action-disabled-color: #242424; +} + :root, [data-nodedc-theme="dark"] { color-scheme: dark; diff --git a/packages/ui-core/src/environment.ts b/packages/ui-core/src/environment.ts new file mode 100644 index 0000000..f7c3979 --- /dev/null +++ b/packages/ui-core/src/environment.ts @@ -0,0 +1,84 @@ +export type EnvironmentMediaKind = "image" | "video"; +export type EnvironmentMediaSource = "file" | "url"; + +export interface EnvironmentMediaItem { + id: string; + source: EnvironmentMediaSource; + url: string | null; + mediaKind: EnvironmentMediaKind | null; + fileName: string | null; +} + +export interface EnvironmentBackground { + enabled: boolean; + imageDurationSeconds: number; + items: EnvironmentMediaItem[]; +} + +export interface EnvironmentPage { + headerLabel: string; + eyebrow: string; + title: string; + description: string; + primaryWorkspaceId: string | null; + secondaryWorkspaceId: string | null; + background: EnvironmentBackground; +} + +export interface EnvironmentSettings { revision: number; pages: Record } +export interface UploadedEnvironmentMedia { url: string; fileName: string; mediaKind: EnvironmentMediaKind } +export interface EnvironmentAction { id: string; label: string; description?: string } +export interface EnvironmentSurface { id: string; home?: boolean; description?: string; actions: readonly EnvironmentAction[] } + +export const defaultEnvironmentImageDurationSeconds = 10; +export const maxEnvironmentMediaItems = 24; + +export function createEnvironmentMediaItem(): EnvironmentMediaItem { + return { + id: `media-${crypto.randomUUID()}`, + source: "file", + url: null, + mediaKind: null, + fileName: null, + }; +} + +export function appendEnvironmentMediaItem( + background: EnvironmentBackground, + item: EnvironmentMediaItem = createEnvironmentMediaItem(), +): EnvironmentBackground { + if ( + background.items.length >= maxEnvironmentMediaItems + || background.items.some((candidate) => candidate.id === item.id) + ) { + return background; + } + return { + ...background, + enabled: background.items.length === 0 ? true : background.enabled, + items: [...background.items, item], + }; +} + +export function removeEnvironmentMediaItem( + background: EnvironmentBackground, + itemId: string, +): EnvironmentBackground { + const items = background.items.filter((item) => item.id !== itemId); + if (items.length === background.items.length) return background; + return { + ...background, + enabled: items.length > 0 && background.enabled, + items, + }; +} + +export function inferEnvironmentMediaKind(url: string): EnvironmentMediaKind { + return /\.(mp4|webm|mov)(?:[?#].*)?$/i.test(url) ? "video" : "image"; +} + +export function cloneEnvironmentSettings(settings: EnvironmentSettings): EnvironmentSettings { + return { ...settings, pages: Object.fromEntries(Object.entries(settings.pages).map(([id, page]) => [id, { + ...page, background: { ...page.background, items: page.background.items.map(item => ({ ...item })) }, + }])) }; +} diff --git a/packages/ui-core/src/index.ts b/packages/ui-core/src/index.ts index 3c8b7a3..bbfd81c 100644 --- a/packages/ui-core/src/index.ts +++ b/packages/ui-core/src/index.ts @@ -3,3 +3,4 @@ export * from "./floating.js"; export * from "./glass.js"; export * from "./theme.js"; export * from "./toolbar.js"; +export * from "./environment.js"; diff --git a/packages/ui-core/styles.css b/packages/ui-core/styles.css index 1d1dc49..2b37849 100644 --- a/packages/ui-core/styles.css +++ b/packages/ui-core/styles.css @@ -185,6 +185,26 @@ background: color-mix(in srgb, rgb(var(--nodedc-accent-rgb)) 84%, white); } +.nodedc-button[data-variant="primary"][data-tone="neutral"] { + --nodedc-button-bg: var(--nodedc-neutral-action-bg); + --nodedc-button-color: var(--nodedc-neutral-action-color); + box-shadow: none; +} + +.nodedc-button[data-variant="primary"][data-tone="neutral"]:hover:not(:disabled) { + background: var(--nodedc-neutral-action-hover); +} + +.nodedc-button[data-variant="primary"][data-tone="neutral"]:disabled { + background: var(--nodedc-neutral-action-disabled-bg); + color: var(--nodedc-neutral-action-disabled-color); + opacity: 1; +} + +.nodedc-button[data-variant="primary"][data-tone="neutral"]:focus-visible { + box-shadow: inset 0 0 0 2px var(--nodedc-neutral-action-color); +} + .nodedc-button[data-variant="ghost"] { background: transparent; box-shadow: none; @@ -3850,3 +3870,331 @@ textarea.nodedc-field__control { .nodedc-status[data-variant="indicator"][data-tone="warning"]::before { background: rgb(var(--nodedc-warning-rgb)); } .nodedc-status[data-variant="indicator"][data-tone="danger"]::before { background: rgb(var(--nodedc-danger-rgb)); } .nodedc-status[data-variant="indicator"][data-tone="accent"]::before { background: rgb(var(--nodedc-accent-rgb)); } + +/* Shared product landing and environment settings. */ +.nodedc-landing-stage { + position: relative; + min-width: 0; + min-height: 0; + overflow: hidden; + border-radius: var(--nodedc-radius-card); + background: var(--nodedc-canvas-soft); +} + +.nodedc-landing-stage__media, +.nodedc-landing-stage__shade { + position: absolute; + inset: 0; +} + +.nodedc-landing-stage__media img, +.nodedc-landing-stage__media video { + width: 100%; + height: 100%; + display: block; + object-fit: cover; +} + +.nodedc-landing-stage__shade { + z-index: 1; + background: + linear-gradient(90deg, rgb(5 6 8 / 0.82) 0%, rgb(5 6 8 / 0.54) 46%, rgb(5 6 8 / 0.24) 100%), + linear-gradient(0deg, rgb(5 6 8 / 0.58), transparent 38%); + pointer-events: none; +} + +.nodedc-landing-stage:not([data-has-media="true"]) .nodedc-landing-stage__shade { + background: none; +} + +.nodedc-landing-stage__copy { + position: absolute; + z-index: 2; + top: 50%; + left: clamp(2rem, 5vw, 6rem); + width: min(39rem, 50%); + transform: translateY(-55%); +} + +.nodedc-landing-stage__copy h1 { + margin: 0.75rem 0 1rem; + color: var(--nodedc-text-primary); + font-size: clamp(3rem, 7vw, 7.6rem); + font-weight: 600; + letter-spacing: -0.072em; + line-height: 0.87; +} + +.nodedc-landing-stage__copy p { + max-width: 34rem; + margin: 0; + color: var(--nodedc-text-secondary); + font-size: clamp(0.8rem, 1vw, 1rem); + line-height: 1.6; +} + +.nodedc-landing-stage__actions { + display: flex; + flex-wrap: wrap; + gap: 0.65rem; + margin-top: 1.6rem; +} + +.nodedc-landing-stage__status { + position: absolute; + z-index: 2; + top: 2.4rem; + right: 2.4rem; + display: grid; + width: min(24rem, 30vw); + gap: 0.6rem; + border-radius: 1.25rem; + background: rgb(10 10 12 / 0.58); + padding: 1rem; + backdrop-filter: blur(18px); +} + +.nodedc-landing-stage__status > div { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; +} + +.nodedc-landing-stage__status p { + margin: 0.15rem 0 0; + color: var(--nodedc-text-muted); + font-size: 0.66rem; + line-height: 1.45; +} + +.nodedc-landing-stage__footer { + position: absolute; + z-index: 2; + right: 2.4rem; + bottom: 1.8rem; + left: 2.4rem; + display: flex; + justify-content: space-between; + gap: 1rem; + color: var(--nodedc-text-muted); + font-size: 0.57rem; + font-weight: 780; + letter-spacing: 0.12em; +} + +.nodedc-environment-settings { + display: grid; + gap: 1rem; +} + +.nodedc-environment-settings__copy { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.85rem; +} + +.nodedc-environment-settings__editor { + display: grid; + gap: 1rem; +} + +.nodedc-environment-settings__surface { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); + align-items: center; + gap: 1rem; +} + +.nodedc-environment-settings__surface > span { + color: var(--nodedc-text-secondary); + font-size: 0.74rem; + font-weight: 650; +} + +.nodedc-environment-settings__surface .nodedc-select-anchor, +.nodedc-environment-settings__surface .nodedc-select { + width: 100%; +} + +.nodedc-environment-settings__quick-actions { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.85rem; +} + +.nodedc-environment-settings__quick-actions > div { + display: grid; + gap: 0.4rem; +} + +.nodedc-environment-settings__quick-actions span { + color: var(--nodedc-text-secondary); + font-size: 0.68rem; + font-weight: 650; +} + +.nodedc-environment-settings__quick-actions .nodedc-select-anchor, +.nodedc-environment-settings__quick-actions .nodedc-select { + width: 100%; +} + +.nodedc-environment-media-playlist { + display: grid; + min-width: 0; + gap: 0.85rem; +} + +.nodedc-environment-media-playlist__head { + display: flex; + min-width: 0; + align-items: center; + justify-content: space-between; + gap: 1rem; +} + +.nodedc-environment-media-playlist__head > div { + display: grid; + min-width: 0; + gap: 0.22rem; +} + +.nodedc-environment-media-playlist__head span { + color: var(--nodedc-text-secondary); + font-size: var(--nodedc-font-size-sm); + font-weight: var(--nodedc-font-weight-medium); +} + +.nodedc-environment-media-playlist__head p, +.nodedc-environment-media-playlist__empty, +.nodedc-environment-media-playlist__timing > span, +.nodedc-environment-media-playlist__error { + margin: 0; + color: var(--nodedc-text-muted); + font-size: var(--nodedc-font-size-xs); + line-height: 1.4; +} + +.nodedc-environment-media-playlist__error { + color: rgb(var(--nodedc-danger-rgb)); +} + +.nodedc-environment-media-playlist__items { + display: grid; + min-width: 0; + gap: 0.7rem; +} + +.nodedc-environment-media-playlist__item { + display: grid; + min-width: 0; + grid-template-columns: minmax(0, 1fr) auto; + align-items: start; + gap: 0.4rem; +} + +.nodedc-environment-media-playlist__item-actions { + display: flex; + align-items: center; + gap: 0.1rem; + padding-top: 1.65rem; +} + +.nodedc-environment-media-playlist__timing { + display: grid; + gap: 0.42rem; +} + +@media (max-width: 760px) { + .nodedc-environment-settings__copy, + .nodedc-environment-settings__quick-actions { + grid-template-columns: 1fr; + } + + .nodedc-environment-settings__surface { + grid-template-columns: 1fr; + } + + .nodedc-environment-media-playlist__item { + grid-template-columns: minmax(0, 1fr); + } + + .nodedc-environment-media-playlist__item-actions { + justify-self: end; + padding-top: 0; + } +} + +@media (max-width: 1480px) { + .nodedc-landing-stage__copy { + width: min(35rem, 54%); + } +} +@media (max-width: 1040px) { + .nodedc-landing-stage__status { + width: 20rem; + max-width: 36vw; + } +} +@media (max-width: 1040px) { + .nodedc-landing-stage__copy h1 { + font-size: clamp(2.7rem, 7vw, 5.6rem); + } +} +@media (max-width: 760px) { + .nodedc-landing-stage__copy { + top: 42%; + right: 1.2rem; + left: 1.2rem; + width: auto; + } +} +@media (max-width: 760px) { + .nodedc-landing-stage__copy h1 { + font-size: clamp(2.8rem, 14vw, 5rem); + } +} +@media (max-width: 760px) { + .nodedc-landing-stage__status { + top: auto; + right: 1rem; + bottom: 3.3rem; + left: 1rem; + width: auto; + max-width: none; + } +} +@media (max-width: 760px) { + .nodedc-landing-stage__footer { + right: 1rem; + bottom: 1.1rem; + left: 1rem; + } +} +@media (max-width: 760px) { + .nodedc-landing-stage__footer span:first-child { + display: none; + } +} +@media (max-height: 720px) and (min-width: 761px) { + .nodedc-landing-stage__copy h1 { + font-size: clamp(2.7rem, 6vw, 5rem); + } +} +@media (max-height: 720px) and (min-width: 761px) { + .nodedc-landing-stage__copy p { + font-size: 0.76rem; + } +} +@media (max-height: 720px) and (min-width: 761px) { + .nodedc-landing-stage__actions { + margin-top: 1rem; + } +} +@media (max-height: 720px) and (min-width: 761px) { + .nodedc-landing-stage__status { + top: 1.2rem; + right: 1.2rem; + } +} +.nodedc-landing-stage__eyebrow { color: var(--nodedc-text-muted); font-size: var(--nodedc-font-size-xs); font-weight: var(--nodedc-font-weight-strong); letter-spacing: .12em; } diff --git a/packages/ui-react/src/Button.tsx b/packages/ui-react/src/Button.tsx index 326cda1..7b1d00a 100644 --- a/packages/ui-react/src/Button.tsx +++ b/packages/ui-react/src/Button.tsx @@ -8,6 +8,8 @@ export type ButtonShape = "default" | "pill" | "rounded"; export interface ButtonProps extends ButtonHTMLAttributes { variant?: ButtonVariant; + /** Neutral primary actions remain white/gray independently of the product accent. */ + tone?: "theme" | "neutral"; size?: ButtonSize; width?: "auto" | "full"; shape?: ButtonShape; @@ -17,6 +19,7 @@ export interface ButtonProps extends ButtonHTMLAttributes { export const Button = forwardRef(function Button({ variant = "secondary", + tone = "theme", size = "default", width = "auto", shape = "default", @@ -35,6 +38,7 @@ export const Button = forwardRef(function Button type={type} className={cn("nodedc-button", className)} data-variant={variant} + data-tone={tone === "theme" ? undefined : tone} data-size={size === "default" ? undefined : size} data-width={width === "auto" ? undefined : width} data-shape={shape === "default" ? undefined : shape} diff --git a/packages/ui-react/src/EnvironmentBackgroundMedia.tsx b/packages/ui-react/src/EnvironmentBackgroundMedia.tsx new file mode 100644 index 0000000..580d52e --- /dev/null +++ b/packages/ui-react/src/EnvironmentBackgroundMedia.tsx @@ -0,0 +1,92 @@ +import { useEffect, useMemo, useState } from "react"; + +import type { + EnvironmentBackground, + EnvironmentMediaItem, +} from "@nodedc/ui-core"; + +type ReadyEnvironmentMediaItem = EnvironmentMediaItem & { + url: string; + mediaKind: "image" | "video"; +}; + +function isReadyMediaItem( + item: EnvironmentMediaItem, +): item is ReadyEnvironmentMediaItem { + return Boolean(item.url && item.mediaKind); +} + +export function EnvironmentBackgroundMedia({ + background, +}: { + background: EnvironmentBackground; +}) { + const items = useMemo( + () => background.items.filter(isReadyMediaItem), + [background.items], + ); + const playlistIdentity = items.map((item) => `${item.id}:${item.url}`).join("|"); + const [activeIndex, setActiveIndex] = useState(0); + const [failedIds, setFailedIds] = useState>(new Set()); + const playableItems = items.filter((item) => !failedIds.has(item.id)); + const activeItem = playableItems[activeIndex] ?? playableItems[0] ?? null; + + useEffect(() => { + setActiveIndex(0); + setFailedIds(new Set()); + }, [playlistIdentity]); + + useEffect(() => { + if ( + !background.enabled + || !activeItem + || activeItem.mediaKind !== "image" + || playableItems.length < 2 + ) { + return; + } + const timer = window.setTimeout(() => { + setActiveIndex((current) => (current + 1) % playableItems.length); + }, background.imageDurationSeconds * 1_000); + return () => window.clearTimeout(timer); + }, [ + activeItem, + background.enabled, + background.imageDurationSeconds, + playableItems.length, + ]); + + if (!background.enabled || !activeItem) return null; + + return ( + + ); +} diff --git a/packages/ui-react/src/EnvironmentMediaPlaylistEditor.tsx b/packages/ui-react/src/EnvironmentMediaPlaylistEditor.tsx new file mode 100644 index 0000000..a8d9b3d --- /dev/null +++ b/packages/ui-react/src/EnvironmentMediaPlaylistEditor.tsx @@ -0,0 +1,251 @@ +import { useEffect, useMemo, useRef, useState } from "react"; +import { + Icon, + IconButton, + MediaSourceField, + RangeControl, + SortableList, +} from "./index.js"; + +import { + appendEnvironmentMediaItem, + inferEnvironmentMediaKind, + maxEnvironmentMediaItems, + removeEnvironmentMediaItem, + type EnvironmentBackground, + type EnvironmentMediaItem, + type UploadedEnvironmentMedia, +} from "@nodedc/ui-core"; + +export interface EnvironmentMediaPlaylistEditorProps { + surfaceId: string; + background: EnvironmentBackground; + disabled: boolean; + error: string | null; + onChange: (background: EnvironmentBackground) => void; + onBusyChange: (busy: boolean) => void; + onUpload: ( + surfaceId: string, + itemId: string, + file: File, + ) => Promise; +} + +const acceptedEnvironmentMedia = [ + "image/png", + "image/jpeg", + "image/gif", + "image/webp", + "image/avif", + "video/mp4", + "video/webm", + "video/quicktime", + ".png", + ".jpg", + ".jpeg", + ".gif", + ".webp", + ".avif", + ".mp4", + ".webm", + ".mov", +].join(","); + +function patchItem( + background: EnvironmentBackground, + itemId: string, + patch: Partial, +): EnvironmentBackground { + return { + ...background, + items: background.items.map((item) => ( + item.id === itemId ? { ...item, ...patch } : item + )), + }; +} + +export function EnvironmentMediaPlaylistEditor({ + surfaceId, + background, + disabled, + error, + onChange, + onBusyChange, + onUpload, +}: EnvironmentMediaPlaylistEditorProps) { + const [uploadingIds, setUploadingIds] = useState>(new Set()); + const [itemErrors, setItemErrors] = useState>({}); + const mounted = useRef(true); + useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []); + const backgroundRef = useRef(background); + backgroundRef.current = background; + const displayedItems = useMemo( + () => [...background.items].reverse(), + [background.items], + ); + + useEffect(() => { + onBusyChange(uploadingIds.size > 0); + }, [onBusyChange, uploadingIds.size]); + + useEffect(() => () => onBusyChange(false), [onBusyChange]); + + const setItemError = (itemId: string, message?: string) => { + setItemErrors((current) => { + const next = { ...current }; + if (message) next[itemId] = message; + else delete next[itemId]; + return next; + }); + }; + + const uploadFile = async (itemId: string, file?: File) => { + if (!file) return; + setUploadingIds((current) => new Set(current).add(itemId)); + setItemError(itemId); + try { + const uploaded = await onUpload(surfaceId, itemId, file); + if (!mounted.current) return; + onChange(patchItem(backgroundRef.current, itemId, { + source: "file", + url: uploaded.url, + mediaKind: uploaded.mediaKind, + fileName: uploaded.fileName, + })); + } catch (reason) { + if (!mounted.current) return; + setItemError( + itemId, + reason instanceof Error + ? reason.message + : "Не удалось загрузить медиаконтент.", + ); + } finally { + if (mounted.current) setUploadingIds((current) => { + const next = new Set(current); + next.delete(itemId); + return next; + }); + } + }; + + return ( +
+
+
+ Видео / картинка +

MP4, WebM, MOV, PNG, JPEG, GIF, WebP или AVIF · до 256 МБ.

+
+ = maxEnvironmentMediaItems} + onClick={() => onChange(appendEnvironmentMediaItem(background))} + > + + +
+ + {displayedItems.length ? ( + item.id} + className="nodedc-environment-media-playlist__items" + onReorder={(items) => !disabled && onChange({ + ...background, + items: [...items].reverse(), + })} + > + {(item, { handle }) => { + const playbackIndex = background.items.findIndex( + (candidate) => candidate.id === item.id, + ); + return ( +
+ { + if (source === item.source) return; + setItemError(item.id); + onChange(patchItem(background, item.id, { + source, + url: null, + mediaKind: null, + fileName: null, + })); + }} + onUrlChange={(url) => { + setItemError(item.id); + onChange(patchItem(background, item.id, { + source: "url", + url: url || null, + mediaKind: url ? inferEnvironmentMediaKind(url) : null, + fileName: null, + })); + }} + onFileChange={(file) => void uploadFile(item.id, file)} + /> +
+ { + setItemError(item.id); + onChange(removeEnvironmentMediaItem(background, item.id)); + }} + > + + + {handle} +
+
+ ); + }} + + ) : ( + <> +

+ Добавьте первый файл или прямую ссылку на медиаконтент. +

+ {error ? ( +

+ {error} +

+ ) : null} + + )} + +
+ `${value} с`} + onChange={(imageDurationSeconds) => onChange({ + ...background, + imageDurationSeconds, + })} + /> + + Новые элементы появляются сверху. Воспроизведение начинается снизу; + перетаскивание меняет порядок. + +
+
+ ); +} diff --git a/packages/ui-react/src/EnvironmentSettingsWindow.tsx b/packages/ui-react/src/EnvironmentSettingsWindow.tsx new file mode 100644 index 0000000..c795591 --- /dev/null +++ b/packages/ui-react/src/EnvironmentSettingsWindow.tsx @@ -0,0 +1,355 @@ +import { useEffect, useMemo, useState } from "react"; +import { + Button, + FeatureSettingsWindow, + Select, + SettingsCard, + Switch, + TextAreaField, + TextField, + WindowFooterActions, +} from "./index.js"; + +import { + cloneEnvironmentSettings, + type EnvironmentBackground, + type EnvironmentPage, + type EnvironmentSettings, + type EnvironmentSurface, + type UploadedEnvironmentMedia, +} from "@nodedc/ui-core"; +import { EnvironmentMediaPlaylistEditor } from "./EnvironmentMediaPlaylistEditor.js"; + +export interface EnvironmentSettingsWindowProps { + productName: string; + surfaces: readonly EnvironmentSurface[]; + initialSurfaceId?: string; + open: boolean; + settings: EnvironmentSettings; + state: "loading" | "ready" | "saving" | "error"; + error: string | null; + onClose: () => void; + onSave: (settings: EnvironmentSettings) => Promise; + onUpload: ( + surfaceId: string, + itemId: string, + file: File, + ) => Promise; +} + +function patchPage( + draft: EnvironmentSettings, + surfaceId: string, + patch: Partial, +): EnvironmentSettings { + return { + ...draft, + pages: { + ...draft.pages, + [surfaceId]: { + ...draft.pages[surfaceId], + ...patch, + }, + }, + }; +} + +function patchBackground( + draft: EnvironmentSettings, + surfaceId: string, + patch: Partial, +): EnvironmentSettings { + const page = draft.pages[surfaceId]; + return patchPage(draft, surfaceId, { + background: { + ...page.background, + ...patch, + }, + }); +} + +export function EnvironmentSettingsWindow({ + productName, + surfaces, + initialSurfaceId, + open, + settings, + state, + error, + onClose, + onSave, + onUpload, +}: EnvironmentSettingsWindowProps) { + const [draft, setDraft] = useState(() => cloneEnvironmentSettings(settings)); + const [surfaceId, setSurfaceId] = useState(initialSurfaceId ?? surfaces[0]?.id ?? "home"); + const [uploading, setUploading] = useState(false); + const [localError, setLocalError] = useState(null); + + useEffect(() => { + if (!open) return; + setDraft(cloneEnvironmentSettings(settings)); + setLocalError(null); + }, [open, settings]); + + const selectedPage = draft.pages[surfaceId]; + const selectedBackground = selectedPage.background; + const pageOptions = surfaces.map(surface => ({ value: surface.id, label: draft.pages[surface.id].headerLabel, description: surface.description })); + const selectedSurface = surfaces.find(surface => surface.id === surfaceId) ?? surfaces[0]; + const quickActionWorkspaces = selectedSurface?.actions ?? []; + const quickActionOptions = useMemo(() => [ + { + value: "none", + label: "Не показывать", + description: "Кнопка скрыта на стартовом экране", + }, + ...quickActionWorkspaces.map((workspace) => ({ + value: workspace.id, + label: workspace.label, + description: workspace.description, + })), + ], [quickActionWorkspaces]); + const dirty = useMemo( + () => JSON.stringify(draft) !== JSON.stringify(settings), + [draft, settings], + ); + const busy = state === "loading" || state === "saving" || uploading; + + const updatePage = (patch: Partial) => { + setDraft((current) => patchPage(current, surfaceId, patch)); + }; + + const save = async () => { + const invalid = Object.entries(draft.pages).find(([, page]) => ( + !page.headerLabel.trim() + || !page.eyebrow.trim() + || !page.title.trim() + || !page.description.trim() + )); + if (invalid) { + setLocalError("Название, надзаголовок, заголовок и описание не могут быть пустыми."); + return; + } + const duplicateActions = Object.entries(draft.pages).find(([, page]) => ( + page.primaryWorkspaceId && page.primaryWorkspaceId === page.secondaryWorkspaceId + )); + if (duplicateActions) { + setSurfaceId(duplicateActions[0]); + setLocalError("Быстрые кнопки должны вести на разные рабочие поверхности."); + return; + } + const invalidMedia = Object.entries(draft.pages).find(([, page]) => ( + (page.background.enabled && !page.background.items.length) + || page.background.items.some((item) => { + if (!item.url || !item.mediaKind) return true; + if (item.source !== "url") return false; + try { + const parsed = new URL(item.url); + return !["http:", "https:"].includes(parsed.protocol); + } catch { + return true; + } + }) + )); + if (invalidMedia) { + setSurfaceId(invalidMedia[0] as string); + setLocalError( + "Каждый элемент фона должен содержать загруженный файл или прямой HTTP(S) URL.", + ); + return; + } + setLocalError(null); + try { + await onSave({ + ...draft, + pages: Object.fromEntries( + Object.entries(draft.pages).map(([id, page]) => [id, { + ...page, + headerLabel: page.headerLabel.trim(), + eyebrow: page.eyebrow.trim(), + title: page.title.trim(), + description: page.description.trim(), + }]), + ) as EnvironmentSettings["pages"], + }); + onClose(); + } catch (reason) { + setLocalError(reason instanceof Error + ? reason.message + : "Не удалось сохранить настройки окружения."); + } + }; + + return ( + undefined} + onClose={onClose} + footer={( + + + + + )} + > +
+ { + if (enabled && !selectedBackground.items.length) { + setLocalError("Сначала добавьте медиаконтент."); + return; + } + setLocalError(null); + setDraft((current) => + patchBackground(current, surfaceId, { enabled })); + }} + /> + )} + > +
+
+ Страница + updatePage({ + primaryWorkspaceId: value === "none" ? null : value, + })} + /> +
+
+ Кнопка 2 + +