Add pink media stage and sharing modal system

packages/ui-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nodedc/ui-react",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "type": "module",
   "files": ["dist"],
   "main": "./dist/index.js",
@@ -16,7 +16,7 @@
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@nodedc/ui-core": "0.4.0",
+    "@nodedc/ui-core": "0.5.0",
     "lucide-react": "^0.468.0"
   },
   "peerDependencies": {

packages/ui-react/src/Icon.tsx

@@ -97,7 +97,7 @@ export interface IconProps extends Omit<LucideProps, "ref"> {
   label?: string;
 }
 
-export function Icon({ name, label, size = 18, strokeWidth = 1.8, ...props }: IconProps) {
+export function Icon({ name, label, size = 17, strokeWidth = 1.7, ...props }: IconProps) {
   const IconComponent = icons[name];
 
   return (

packages/ui-react/src/SharingModals.tsx

@@ -0,0 +1,246 @@
+import { useEffect, useRef, useState } from "react";
+import { Button, IconButton } from "./Button.js";
+import { Icon } from "./Icon.js";
+import { Select, type SelectOption } from "./Select.js";
+import { TextField } from "./Field.js";
+import { Window, WindowFooterActions } from "./Window.js";
+
+export interface ShareAccessMember<Role extends string = string> {
+  id: string;
+  name: string;
+  email: string;
+  role: Role;
+  roleLabel?: string;
+  avatarUrl?: string;
+  immutable?: boolean;
+}
+
+export interface ShareAccessModalProps<Role extends string = string> {
+  open: boolean;
+  resourceName: string;
+  members: readonly ShareAccessMember<Role>[];
+  roleOptions: Array<SelectOption<Role>>;
+  inviteEmail: string;
+  inviteRole: Role;
+  canManage?: boolean;
+  pending?: boolean;
+  message?: string;
+  messageTone?: "neutral" | "success" | "danger" | "accent";
+  onInviteEmailChange: (email: string) => void;
+  onInviteRoleChange: (role: Role) => void;
+  onInvite: () => void | Promise<void>;
+  onMemberRoleChange?: (member: ShareAccessMember<Role>, role: Role) => void;
+  onMemberRemove?: (member: ShareAccessMember<Role>) => void;
+  onClose: () => void;
+}
+
+function initials(name: string, email: string) {
+  const words = (name || email).split(/[\s._@-]+/).filter(Boolean);
+  return `${words[0]?.[0] ?? "N"}${words[1]?.[0] ?? words[0]?.[1] ?? ""}`.toUpperCase();
+}
+
+export function ShareAccessModal<Role extends string>({
+  open,
+  resourceName,
+  members,
+  roleOptions,
+  inviteEmail,
+  inviteRole,
+  canManage = true,
+  pending = false,
+  message,
+  messageTone = "neutral",
+  onInviteEmailChange,
+  onInviteRoleChange,
+  onInvite,
+  onMemberRoleChange,
+  onMemberRemove,
+  onClose,
+}: ShareAccessModalProps<Role>) {
+  const [membersOpen, setMembersOpen] = useState(false);
+  const membersRootRef = useRef<HTMLElement>(null);
+
+  useEffect(() => {
+    if (!open) setMembersOpen(false);
+  }, [open]);
+
+  useEffect(() => {
+    if (!membersOpen) return;
+    const handlePointerDown = (event: PointerEvent) => {
+      if (!(event.target instanceof Node)) return;
+      if (event.target instanceof Element && event.target.closest(".nodedc-dropdown-surface")) return;
+      if (!membersRootRef.current?.contains(event.target)) setMembersOpen(false);
+    };
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      setMembersOpen(false);
+    };
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    document.addEventListener("keydown", handleKeyDown, true);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+      document.removeEventListener("keydown", handleKeyDown, true);
+    };
+  }, [membersOpen]);
+
+  return (
+    <Window
+      open={open}
+      title="Поделиться графом"
+      subtitle={resourceName.toUpperCase()}
+      className="nodedc-share-access-window"
+      closeOnBackdrop={false}
+      onClose={onClose}
+      footer={
+        <WindowFooterActions>
+          <Button onClick={onClose} disabled={pending}>Отменить</Button>
+          {canManage ? (
+            <Button variant="accent" onClick={() => void onInvite()} disabled={pending || !inviteEmail.trim()}>
+              {pending ? "Сохранение..." : "Поделиться"}
+            </Button>
+          ) : null}
+        </WindowFooterActions>
+      }
+    >
+      <div className="nodedc-share-access">
+        <section ref={membersRootRef} className="nodedc-share-access__members" aria-label="Пользователи с доступом">
+          <span className="nodedc-share-access__section-label">Уже добавлены</span>
+          {members.length ? (
+            <>
+              <button
+                type="button"
+                className="nodedc-share-access__summary"
+                aria-label={`Пользователи с доступом: ${members.length}`}
+                aria-expanded={membersOpen}
+                onClick={() => setMembersOpen((current) => !current)}
+              >
+                <span className="nodedc-share-access__summary-avatars" aria-hidden="true">
+                  {members.slice(0, 3).map((member, index) => (
+                    <span className="nodedc-share-access__summary-avatar" style={{ left: index * 18, zIndex: 10 + index }} key={member.id}>
+                      {member.avatarUrl ? <img src={member.avatarUrl} alt="" /> : initials(member.name, member.email)}
+                    </span>
+                  ))}
+                </span>
+                <span className="nodedc-share-access__summary-count">{members.length}</span>
+              </button>
+            </>
+          ) : <div className="nodedc-share-access__empty">Пока никому не открыт доступ</div>}
+          {membersOpen ? (
+            <div className="nodedc-share-access__member-list">
+              {members.map((member) => (
+              <div className="nodedc-share-access__member" key={member.id}>
+                <span className="nodedc-share-access__avatar" aria-hidden="true">
+                  {member.avatarUrl ? <img src={member.avatarUrl} alt="" /> : initials(member.name, member.email)}
+                </span>
+                <span className="nodedc-share-access__identity">
+                  <strong>{member.name || member.email}</strong>
+                  {member.name && member.name !== member.email ? <small>{member.email}</small> : null}
+                </span>
+                {canManage && !member.immutable && onMemberRoleChange ? (
+                  <Select
+                    value={member.role}
+                    label={`Роль ${member.email}`}
+                    options={roleOptions}
+                    minMenuWidth={150}
+                    onChange={(role) => onMemberRoleChange(member, role)}
+                  />
+                ) : <span className="nodedc-share-access__role">{member.roleLabel ?? member.role}</span>}
+                {canManage && !member.immutable && onMemberRemove ? (
+                  <IconButton label={`Удалить доступ ${member.email}`} onClick={() => onMemberRemove(member)}>
+                    <Icon name="trash" />
+                  </IconButton>
+                ) : null}
+              </div>
+              ))}
+            </div>
+          ) : null}
+        </section>
+
+        {canManage ? (
+          <div className="nodedc-share-access__invite">
+            <TextField
+              label="Пользователь"
+              type="email"
+              value={inviteEmail}
+              disabled={pending}
+              placeholder="email@company.ru"
+              onChange={(event) => onInviteEmailChange(event.target.value)}
+            />
+            <div className="nodedc-field">
+              <span className="nodedc-field__label-row"><span className="nodedc-field__label">Роль</span></span>
+              <Select
+                value={inviteRole}
+                label="Роль доступа"
+                options={roleOptions}
+                disabled={pending}
+                onChange={(role) => onInviteRoleChange(role)}
+              />
+            </div>
+          </div>
+        ) : (
+          <div className="nodedc-share-access__readonly">
+            <strong>Вы не можете пригласить пользователя</strong>
+            <span>Попросите владельца изменить ваш уровень доступа.</span>
+          </div>
+        )}
+
+        {message ? <div className="nodedc-share-access__message" data-tone={messageTone}>{message}</div> : null}
+      </div>
+    </Window>
+  );
+}
+
+export interface ShareLinkModalProps {
+  open: boolean;
+  title?: string;
+  link: string;
+  hint?: string;
+  copyLabel?: string;
+  onCopy?: (link: string) => void | Promise<void>;
+  onClose: () => void;
+}
+
+export function ShareLinkModal({
+  open,
+  title = "Ссылка на модель",
+  link,
+  hint = "Ссылка открывает текущую модель и сохранённую точку обзора.",
+  copyLabel = "Скопировать",
+  onCopy,
+  onClose,
+}: ShareLinkModalProps) {
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!open) setCopied(false);
+  }, [open]);
+
+  const copy = async () => {
+    if (onCopy) await onCopy(link);
+    else await navigator.clipboard.writeText(link);
+    setCopied(true);
+  };
+
+  return (
+    <Window
+      open={open}
+      title={title}
+      size="sm"
+      onClose={onClose}
+      footer={
+        <>
+          <Button onClick={onClose}>Закрыть</Button>
+          <WindowFooterActions>
+            <Button variant="accent" icon={<Icon name={copied ? "check" : "copy"} />} onClick={() => void copy()} disabled={!link}>
+              {copied ? "Скопировано" : copyLabel}
+            </Button>
+          </WindowFooterActions>
+        </>
+      }
+    >
+      <TextField label="Публичная ссылка" value={link} readOnly description={hint} />
+    </Window>
+  );
+}

packages/ui-react/src/index.ts

@@ -16,4 +16,5 @@ export * from "./SegmentedControl.js";
 export * from "./Select.js";
 export * from "./StatusBadge.js";
 export * from "./Settings.js";
+export * from "./SharingModals.js";
 export * from "./Window.js";