jvetrau-ds 0.2.16 → 0.2.18

package/components/choice-group/choice-group.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+require('./choice-group.css');
+var classnames = require('../helpers/classnames');
+
+const ChoiceGroup = ({
+  direction = "column",
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames.classnames(
+    "choice-group",
+    className,
+    {
+      "choice-group--row": direction === "row",
+      "choice-group--column": direction === "column"
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+var choice_group_default = ChoiceGroup;
+
+module.exports = choice_group_default;
+//# sourceMappingURL=choice-group.cjs.map
+//# sourceMappingURL=choice-group.cjs.map

package/components/choice-group/choice-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/choice-group/choice-group.tsx"],"names":["classnames","jsx"],"mappings":";;;;;;AAcA,MAAM,cAEF,CAAC;AAAA,EACH,SAAA,GAAY,QAAA;AAAA,EACZ,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,qBACE,SAAA,KAAc,KAAA;AAAA,MAChB,wBACE,SAAA,KAAc;AAAA;AAClB,GACF;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,oBAAA,GAAQ","file":"choice-group.cjs","sourcesContent":["import React from 'react';\n\nimport './choice-group.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type ChoiceGroupDirection =\n  | 'column'\n  | 'row';\n\nexport interface ChoiceGroupProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  direction?: ChoiceGroupDirection;\n}\n\nconst ChoiceGroup: React.FC<\n  ChoiceGroupProps\n> = ({\n  direction = 'column',\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'choice-group',\n    className,\n    {\n      'choice-group--row':\n        direction === 'row',\n      'choice-group--column':\n        direction === 'column',\n    },\n  );\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default ChoiceGroup;\n"]}

package/components/choice-group/choice-group.css

@@ -0,0 +1,50 @@
+.choice-group {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  gap: var(--margin-choice);
+
+  min-width: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.choice-group--column {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  flex-direction: column;
+  align-items: flex-start;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.choice-group--row {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}

package/components/choice-group/choice-group.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './choice-group.css';
+export type ChoiceGroupDirection = 'column' | 'row';
+export interface ChoiceGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    direction?: ChoiceGroupDirection;
+}
+declare const ChoiceGroup: React.FC<ChoiceGroupProps>;
+export default ChoiceGroup;

package/components/choice-group/choice-group.js

@@ -0,0 +1,32 @@
+import { jsx } from 'react/jsx-runtime';
+import './choice-group.css';
+import { classnames } from '../helpers/classnames';
+
+const ChoiceGroup = ({
+  direction = "column",
+  className = "",
+  children,
+  ...props
+}) => {
+  const classes = classnames(
+    "choice-group",
+    className,
+    {
+      "choice-group--row": direction === "row",
+      "choice-group--column": direction === "column"
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classes,
+      ...props,
+      children
+    }
+  );
+};
+var choice_group_default = ChoiceGroup;
+
+export { choice_group_default as default };
+//# sourceMappingURL=choice-group.js.map
+//# sourceMappingURL=choice-group.js.map

package/components/choice-group/choice-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/choice-group/choice-group.tsx"],"names":[],"mappings":";;;;AAcA,MAAM,cAEF,CAAC;AAAA,EACH,SAAA,GAAY,QAAA;AAAA,EACZ,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,qBACE,SAAA,KAAc,KAAA;AAAA,MAChB,wBACE,SAAA,KAAc;AAAA;AAClB,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,oBAAA,GAAQ","file":"choice-group.js","sourcesContent":["import React from 'react';\n\nimport './choice-group.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type ChoiceGroupDirection =\n  | 'column'\n  | 'row';\n\nexport interface ChoiceGroupProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  direction?: ChoiceGroupDirection;\n}\n\nconst ChoiceGroup: React.FC<\n  ChoiceGroupProps\n> = ({\n  direction = 'column',\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'choice-group',\n    className,\n    {\n      'choice-group--row':\n        direction === 'row',\n      'choice-group--column':\n        direction === 'column',\n    },\n  );\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\nexport default ChoiceGroup;\n"]}

package/components/choice-group/choice-group.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const choiceGroupMeta: ComponentMeta;

package/components/choice-group/index.cjs

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var choiceGroup = require('./choice-group');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var choiceGroup__default = /*#__PURE__*/_interopDefault(choiceGroup);
+
+
+
+Object.defineProperty(exports, "ChoiceGroup", {
+  enumerable: true,
+  get: function () { return choiceGroup__default.default; }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () { return choiceGroup__default.default; }
+});
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/components/choice-group/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.cjs","sourcesContent":[]}

package/components/choice-group/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './choice-group';
+export { default as ChoiceGroup } from './choice-group';
+export type { ChoiceGroupDirection, ChoiceGroupProps, } from './choice-group';

package/components/choice-group/index.js

@@ -0,0 +1,3 @@
+export { default as ChoiceGroup, default } from './choice-group';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/components/choice-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/components/embed-viewer/embed-viewer.cjs

@@ -1,13 +1,33 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
 require('./embed-viewer.css');
+var ActionGroup = require('../action-group');
+var Button = require('../button');
 var classnames = require('../helpers/classnames');
+var openGraph = require('./open-graph');
+var resolver = require('./resolver');
 
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var ActionGroup__default = /*#__PURE__*/_interopDefault(ActionGroup);
+var Button__default = /*#__PURE__*/_interopDefault(Button);
+
+function openUrl(url) {
+  window.open(
+    url,
+    "_blank",
+    "noopener,noreferrer"
+  );
+}
 const EmbedViewer = ({
   src,
+  embedSrc,
   iframeTitle,
   description,
+  showTemplateAction = false,
+  showOpenAction = false,
   actions,
   className = "",
   ...props
@@ -17,6 +37,43 @@ const EmbedViewer = ({
     className,
     {}
   );
+  const resolvedResource = resolver.resolveEmbedResource({
+    src,
+    embedSrc
+  });
+  const [
+    previewImageUrl,
+    setPreviewImageUrl
+  ] = react.useState(
+    null
+  );
+  react.useEffect(() => {
+    setPreviewImageUrl(null);
+    if (resolvedResource.embedUrl || !resolvedResource.sourceUrl) {
+      return;
+    }
+    const controller = new AbortController();
+    void openGraph.resolveOpenGraphImage(
+      resolvedResource.sourceUrl,
+      controller.signal
+    ).then((imageUrl) => {
+      if (!controller.signal.aborted) {
+        setPreviewImageUrl(
+          imageUrl
+        );
+      }
+    });
+    return () => {
+      controller.abort();
+    };
+  }, [
+    resolvedResource.embedUrl,
+    resolvedResource.sourceUrl
+  ]);
+  const templateActionUrl = showTemplateAction && resolvedResource.sourceUrl ? resolvedResource.copyUrl ?? resolvedResource.sourceUrl : null;
+  const openActionUrl = showOpenAction && resolvedResource.sourceUrl ? resolvedResource.sourceUrl : null;
+  const hasStandardActions = templateActionUrl !== null || openActionUrl !== null;
+  const hasActions = hasStandardActions || Boolean(actions);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -24,15 +81,46 @@ const EmbedViewer = ({
       ...props,
       children: [
         description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "embed-viewer__description", children: description }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        resolvedResource.embedUrl && /* @__PURE__ */ jsxRuntime.jsx(
           "iframe",
           {
             className: "embed-viewer__frame",
-            src,
+            src: resolvedResource.embedUrl,
             title: iframeTitle
           }
         ),
-        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "embed-viewer__actions", children: actions })
+        !resolvedResource.embedUrl && previewImageUrl && /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            className: "embed-viewer__preview",
+            src: previewImageUrl,
+            alt: ""
+          }
+        ),
+        hasActions && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "embed-viewer__actions", children: [
+          hasStandardActions && /* @__PURE__ */ jsxRuntime.jsxs(ActionGroup__default.default, { children: [
+            templateActionUrl && /* @__PURE__ */ jsxRuntime.jsx(
+              Button__default.default,
+              {
+                onClick: () => openUrl(
+                  templateActionUrl
+                ),
+                children: "\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0448\u0430\u0431\u043B\u043E\u043D"
+              }
+            ),
+            openActionUrl && /* @__PURE__ */ jsxRuntime.jsx(
+              Button__default.default,
+              {
+                rank: "link",
+                onClick: () => openUrl(
+                  openActionUrl
+                ),
+                children: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432\u043E \u0432\u0435\u0441\u044C \u044D\u043A\u0440\u0430\u043D"
+              }
+            )
+          ] }),
+          actions
+        ] })
       ]
     }
   );

package/components/embed-viewer/embed-viewer.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/embed-viewer/embed-viewer.tsx"],"names":["classnames","jsxs","jsx"],"mappings":";;;;;;AAgBA,MAAM,cAEF,CAAC;AAAA,EACH,GAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACEC,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,WAAA,oBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2BAAA,EACZ,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,wBAGFA,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,qBAAA;AAAA,YACV,GAAA;AAAA,YACA,KAAA,EAAO;AAAA;AAAA,SACT;AAAA,QAEC,OAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBACZ,QAAA,EAAA,OAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,oBAAA,GAAQ","file":"embed-viewer.cjs","sourcesContent":["import React from 'react';\n\nimport './embed-viewer.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface EmbedViewerProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  src: string;\n  iframeTitle: string;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n}\n\nconst EmbedViewer: React.FC<\n  EmbedViewerProps\n> = ({\n  src,\n  iframeTitle,\n  description,\n  actions,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'embed-viewer',\n    className,\n    {},\n  );\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {description && (\n        <div className=\"embed-viewer__description\">\n          {description}\n        </div>\n      )}\n\n      <iframe\n        className=\"embed-viewer__frame\"\n        src={src}\n        title={iframeTitle}\n      />\n\n      {actions && (\n        <div className=\"embed-viewer__actions\">\n          {actions}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default EmbedViewer;\n"]}
+{"version":3,"sources":["../../../src/components/embed-viewer/embed-viewer.tsx"],"names":["classnames","resolveEmbedResource","useState","useEffect","resolveOpenGraphImage","jsxs","jsx","ActionGroup","Button"],"mappings":"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","file":"embed-viewer.cjs","sourcesContent":["import React, {\n  useEffect,\n  useState,\n} from 'react';\n\nimport './embed-viewer.css';\nimport ActionGroup from '../action-group';\nimport Button from '../button';\nimport { classnames } from '../helpers/classnames';\nimport {\n  resolveOpenGraphImage,\n} from './open-graph';\nimport {\n  resolveEmbedResource,\n} from './resolver';\n\nexport interface EmbedViewerProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  src: string;\n  embedSrc?: string;\n  iframeTitle: string;\n  description?: React.ReactNode;\n  showTemplateAction?: boolean;\n  showOpenAction?: boolean;\n  actions?: React.ReactNode;\n}\n\nfunction openUrl(url: string) {\n  window.open(\n    url,\n    '_blank',\n    'noopener,noreferrer',\n  );\n}\n\nconst EmbedViewer: React.FC<\n  EmbedViewerProps\n> = ({\n  src,\n  embedSrc,\n  iframeTitle,\n  description,\n  showTemplateAction = false,\n  showOpenAction = false,\n  actions,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'embed-viewer',\n    className,\n    {},\n  );\n\n  const resolvedResource =\n    resolveEmbedResource({\n      src,\n      embedSrc,\n    });\n\n  const [\n    previewImageUrl,\n    setPreviewImageUrl,\n  ] = useState<string | null>(\n    null,\n  );\n\n  useEffect(() => {\n    setPreviewImageUrl(null);\n\n    if (\n      resolvedResource.embedUrl ||\n      !resolvedResource.sourceUrl\n    ) {\n      return;\n    }\n\n    const controller =\n      new AbortController();\n\n    void resolveOpenGraphImage(\n      resolvedResource.sourceUrl,\n      controller.signal,\n    ).then((imageUrl) => {\n      if (\n        !controller.signal.aborted\n      ) {\n        setPreviewImageUrl(\n          imageUrl,\n        );\n      }\n    });\n\n    return () => {\n      controller.abort();\n    };\n  }, [\n    resolvedResource.embedUrl,\n    resolvedResource.sourceUrl,\n  ]);\n\n  const templateActionUrl =\n    showTemplateAction &&\n    resolvedResource.sourceUrl\n      ? (\n          resolvedResource.copyUrl ??\n          resolvedResource.sourceUrl\n        )\n      : null;\n\n  const openActionUrl =\n    showOpenAction &&\n    resolvedResource.sourceUrl\n      ? resolvedResource.sourceUrl\n      : null;\n\n  const hasStandardActions =\n    templateActionUrl !== null ||\n    openActionUrl !== null;\n\n  const hasActions =\n    hasStandardActions ||\n    Boolean(actions);\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {description && (\n        <div className=\"embed-viewer__description\">\n          {description}\n        </div>\n      )}\n\n      {resolvedResource.embedUrl && (\n        <iframe\n          className=\"embed-viewer__frame\"\n          src={\n            resolvedResource.embedUrl\n          }\n          title={iframeTitle}\n        />\n      )}\n\n      {!resolvedResource.embedUrl &&\n        previewImageUrl && (\n          <img\n            className=\"embed-viewer__preview\"\n            src={previewImageUrl}\n            alt=\"\"\n          />\n        )}\n\n      {hasActions && (\n        <div className=\"embed-viewer__actions\">\n          {hasStandardActions && (\n            <ActionGroup>\n              {templateActionUrl && (\n                <Button\n                  onClick={() =>\n                    openUrl(\n                      templateActionUrl,\n                    )\n                  }\n                >\n                  Скопировать шаблон\n                </Button>\n              )}\n\n              {openActionUrl && (\n                <Button\n                  rank=\"link\"\n                  onClick={() =>\n                    openUrl(\n                      openActionUrl,\n                    )\n                  }\n                >\n                  Открыть во весь экран\n                </Button>\n              )}\n            </ActionGroup>\n          )}\n\n          {actions}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default EmbedViewer;\n"]}

package/components/embed-viewer/embed-viewer.d.ts

@@ -2,8 +2,11 @@ import React from 'react';
 import './embed-viewer.css';
 export interface EmbedViewerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
     src: string;
+    embedSrc?: string;
     iframeTitle: string;
     description?: React.ReactNode;
+    showTemplateAction?: boolean;
+    showOpenAction?: boolean;
     actions?: React.ReactNode;
 }
 declare const EmbedViewer: React.FC<EmbedViewerProps>;

package/components/embed-viewer/embed-viewer.js

@@ -1,11 +1,26 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
 import './embed-viewer.css';
+import ActionGroup from '../action-group';
+import Button from '../button';
 import { classnames } from '../helpers/classnames';
+import { resolveOpenGraphImage } from './open-graph';
+import { resolveEmbedResource } from './resolver';
 
+function openUrl(url) {
+  window.open(
+    url,
+    "_blank",
+    "noopener,noreferrer"
+  );
+}
 const EmbedViewer = ({
   src,
+  embedSrc,
   iframeTitle,
   description,
+  showTemplateAction = false,
+  showOpenAction = false,
   actions,
   className = "",
   ...props
@@ -15,6 +30,43 @@ const EmbedViewer = ({
     className,
     {}
   );
+  const resolvedResource = resolveEmbedResource({
+    src,
+    embedSrc
+  });
+  const [
+    previewImageUrl,
+    setPreviewImageUrl
+  ] = useState(
+    null
+  );
+  useEffect(() => {
+    setPreviewImageUrl(null);
+    if (resolvedResource.embedUrl || !resolvedResource.sourceUrl) {
+      return;
+    }
+    const controller = new AbortController();
+    void resolveOpenGraphImage(
+      resolvedResource.sourceUrl,
+      controller.signal
+    ).then((imageUrl) => {
+      if (!controller.signal.aborted) {
+        setPreviewImageUrl(
+          imageUrl
+        );
+      }
+    });
+    return () => {
+      controller.abort();
+    };
+  }, [
+    resolvedResource.embedUrl,
+    resolvedResource.sourceUrl
+  ]);
+  const templateActionUrl = showTemplateAction && resolvedResource.sourceUrl ? resolvedResource.copyUrl ?? resolvedResource.sourceUrl : null;
+  const openActionUrl = showOpenAction && resolvedResource.sourceUrl ? resolvedResource.sourceUrl : null;
+  const hasStandardActions = templateActionUrl !== null || openActionUrl !== null;
+  const hasActions = hasStandardActions || Boolean(actions);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -22,15 +74,46 @@ const EmbedViewer = ({
       ...props,
       children: [
         description && /* @__PURE__ */ jsx("div", { className: "embed-viewer__description", children: description }),
-        /* @__PURE__ */ jsx(
+        resolvedResource.embedUrl && /* @__PURE__ */ jsx(
           "iframe",
           {
             className: "embed-viewer__frame",
-            src,
+            src: resolvedResource.embedUrl,
             title: iframeTitle
           }
         ),
-        actions && /* @__PURE__ */ jsx("div", { className: "embed-viewer__actions", children: actions })
+        !resolvedResource.embedUrl && previewImageUrl && /* @__PURE__ */ jsx(
+          "img",
+          {
+            className: "embed-viewer__preview",
+            src: previewImageUrl,
+            alt: ""
+          }
+        ),
+        hasActions && /* @__PURE__ */ jsxs("div", { className: "embed-viewer__actions", children: [
+          hasStandardActions && /* @__PURE__ */ jsxs(ActionGroup, { children: [
+            templateActionUrl && /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: () => openUrl(
+                  templateActionUrl
+                ),
+                children: "\u0421\u043A\u043E\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u0448\u0430\u0431\u043B\u043E\u043D"
+              }
+            ),
+            openActionUrl && /* @__PURE__ */ jsx(
+              Button,
+              {
+                rank: "link",
+                onClick: () => openUrl(
+                  openActionUrl
+                ),
+                children: "\u041E\u0442\u043A\u0440\u044B\u0442\u044C \u0432\u043E \u0432\u0435\u0441\u044C \u044D\u043A\u0440\u0430\u043D"
+              }
+            )
+          ] }),
+          actions
+        ] })
       ]
     }
   );

package/components/embed-viewer/embed-viewer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/embed-viewer/embed-viewer.tsx"],"names":[],"mappings":";;;;AAgBA,MAAM,cAEF,CAAC;AAAA,EACH,GAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,cAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,WAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2BAAA,EACZ,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,wBAGF,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,qBAAA;AAAA,YACV,GAAA;AAAA,YACA,KAAA,EAAO;AAAA;AAAA,SACT;AAAA,QAEC,OAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yBACZ,QAAA,EAAA,OAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,oBAAA,GAAQ","file":"embed-viewer.js","sourcesContent":["import React from 'react';\n\nimport './embed-viewer.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface EmbedViewerProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  src: string;\n  iframeTitle: string;\n  description?: React.ReactNode;\n  actions?: React.ReactNode;\n}\n\nconst EmbedViewer: React.FC<\n  EmbedViewerProps\n> = ({\n  src,\n  iframeTitle,\n  description,\n  actions,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'embed-viewer',\n    className,\n    {},\n  );\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {description && (\n        <div className=\"embed-viewer__description\">\n          {description}\n        </div>\n      )}\n\n      <iframe\n        className=\"embed-viewer__frame\"\n        src={src}\n        title={iframeTitle}\n      />\n\n      {actions && (\n        <div className=\"embed-viewer__actions\">\n          {actions}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default EmbedViewer;\n"]}
+{"version":3,"sources":["../../../src/components/embed-viewer/embed-viewer.tsx"],"names":[],"mappings":"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","file":"embed-viewer.js","sourcesContent":["import React, {\n  useEffect,\n  useState,\n} from 'react';\n\nimport './embed-viewer.css';\nimport ActionGroup from '../action-group';\nimport Button from '../button';\nimport { classnames } from '../helpers/classnames';\nimport {\n  resolveOpenGraphImage,\n} from './open-graph';\nimport {\n  resolveEmbedResource,\n} from './resolver';\n\nexport interface EmbedViewerProps\n  extends Omit<\n    React.HTMLAttributes<HTMLDivElement>,\n    'children'\n  > {\n  src: string;\n  embedSrc?: string;\n  iframeTitle: string;\n  description?: React.ReactNode;\n  showTemplateAction?: boolean;\n  showOpenAction?: boolean;\n  actions?: React.ReactNode;\n}\n\nfunction openUrl(url: string) {\n  window.open(\n    url,\n    '_blank',\n    'noopener,noreferrer',\n  );\n}\n\nconst EmbedViewer: React.FC<\n  EmbedViewerProps\n> = ({\n  src,\n  embedSrc,\n  iframeTitle,\n  description,\n  showTemplateAction = false,\n  showOpenAction = false,\n  actions,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'embed-viewer',\n    className,\n    {},\n  );\n\n  const resolvedResource =\n    resolveEmbedResource({\n      src,\n      embedSrc,\n    });\n\n  const [\n    previewImageUrl,\n    setPreviewImageUrl,\n  ] = useState<string | null>(\n    null,\n  );\n\n  useEffect(() => {\n    setPreviewImageUrl(null);\n\n    if (\n      resolvedResource.embedUrl ||\n      !resolvedResource.sourceUrl\n    ) {\n      return;\n    }\n\n    const controller =\n      new AbortController();\n\n    void resolveOpenGraphImage(\n      resolvedResource.sourceUrl,\n      controller.signal,\n    ).then((imageUrl) => {\n      if (\n        !controller.signal.aborted\n      ) {\n        setPreviewImageUrl(\n          imageUrl,\n        );\n      }\n    });\n\n    return () => {\n      controller.abort();\n    };\n  }, [\n    resolvedResource.embedUrl,\n    resolvedResource.sourceUrl,\n  ]);\n\n  const templateActionUrl =\n    showTemplateAction &&\n    resolvedResource.sourceUrl\n      ? (\n          resolvedResource.copyUrl ??\n          resolvedResource.sourceUrl\n        )\n      : null;\n\n  const openActionUrl =\n    showOpenAction &&\n    resolvedResource.sourceUrl\n      ? resolvedResource.sourceUrl\n      : null;\n\n  const hasStandardActions =\n    templateActionUrl !== null ||\n    openActionUrl !== null;\n\n  const hasActions =\n    hasStandardActions ||\n    Boolean(actions);\n\n  return (\n    <div\n      className={classes}\n      {...props}\n    >\n      {description && (\n        <div className=\"embed-viewer__description\">\n          {description}\n        </div>\n      )}\n\n      {resolvedResource.embedUrl && (\n        <iframe\n          className=\"embed-viewer__frame\"\n          src={\n            resolvedResource.embedUrl\n          }\n          title={iframeTitle}\n        />\n      )}\n\n      {!resolvedResource.embedUrl &&\n        previewImageUrl && (\n          <img\n            className=\"embed-viewer__preview\"\n            src={previewImageUrl}\n            alt=\"\"\n          />\n        )}\n\n      {hasActions && (\n        <div className=\"embed-viewer__actions\">\n          {hasStandardActions && (\n            <ActionGroup>\n              {templateActionUrl && (\n                <Button\n                  onClick={() =>\n                    openUrl(\n                      templateActionUrl,\n                    )\n                  }\n                >\n                  Скопировать шаблон\n                </Button>\n              )}\n\n              {openActionUrl && (\n                <Button\n                  rank=\"link\"\n                  onClick={() =>\n                    openUrl(\n                      openActionUrl,\n                    )\n                  }\n                >\n                  Открыть во весь экран\n                </Button>\n              )}\n            </ActionGroup>\n          )}\n\n          {actions}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default EmbedViewer;\n"]}

package/components/embed-viewer/open-graph.cjs

@@ -0,0 +1,61 @@
+'use strict';
+
+const defaultFetchResource = async (url, init) => fetch(
+  url,
+  init
+);
+function isHtmlResponse(response) {
+  const contentType = response.headers.get(
+    "content-type"
+  );
+  return contentType === null || contentType.includes("text/html");
+}
+function parseOpenGraphImage(html, sourceUrl) {
+  const document = new DOMParser().parseFromString(
+    html,
+    "text/html"
+  );
+  const image = document.head.querySelector(
+    'meta[property="og:image"]'
+  );
+  const content = image?.getAttribute("content");
+  if (!content) {
+    return null;
+  }
+  try {
+    const url = new URL(
+      content,
+      sourceUrl
+    );
+    if (url.protocol !== "http:" && url.protocol !== "https:") {
+      return null;
+    }
+    return url.toString();
+  } catch {
+    return null;
+  }
+}
+async function resolveOpenGraphImage(sourceUrl, signal, fetchResource = defaultFetchResource) {
+  try {
+    const response = await fetchResource(
+      sourceUrl,
+      {
+        signal
+      }
+    );
+    if (!response.ok || !isHtmlResponse(response)) {
+      return null;
+    }
+    const html = await response.text();
+    return parseOpenGraphImage(
+      html,
+      sourceUrl
+    );
+  } catch {
+    return null;
+  }
+}
+
+exports.resolveOpenGraphImage = resolveOpenGraphImage;
+//# sourceMappingURL=open-graph.cjs.map
+//# sourceMappingURL=open-graph.cjs.map

package/components/embed-viewer/open-graph.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/embed-viewer/open-graph.ts"],"names":[],"mappings":";;AAOA,MAAM,oBAAA,GACJ,OACE,GAAA,EACA,IAAA,KAEA,KAAA;AAAA,EACE,GAAA;AAAA,EACA;AACF,CAAA;AAEJ,SAAS,eACP,QAAA,EACS;AACT,EAAA,MAAM,WAAA,GACJ,SAAS,OAAA,CAAQ,GAAA;AAAA,IACf;AAAA,GACF;AAEF,EAAA,OACE,WAAA,KAAgB,IAAA,IAChB,WAAA,CAAY,QAAA,CAAS,WAAW,CAAA;AAEpC;AAEA,SAAS,mBAAA,CACP,MACA,SAAA,EACe;AACf,EAAA,MAAM,QAAA,GACJ,IAAI,SAAA,EAAU,CAAE,eAAA;AAAA,IACd,IAAA;AAAA,IACA;AAAA,GACF;AAEF,EAAA,MAAM,KAAA,GACJ,SAAS,IAAA,CAAK,aAAA;AAAA,IACZ;AAAA,GACF;AAEF,EAAA,MAAM,OAAA,GACJ,KAAA,EAAO,YAAA,CAAa,SAAS,CAAA;AAE/B,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,IAAI;AACF,IAAA,MAAM,MACJ,IAAI,GAAA;AAAA,MACF,OAAA;AAAA,MACA;AAAA,KACF;AAEF,IAAA,IACE,GAAA,CAAI,QAAA,KAAa,OAAA,IACjB,GAAA,CAAI,aAAa,QAAA,EACjB;AACA,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,OAAO,IAAI,QAAA,EAAS;AAAA,EACtB,CAAA,CAAA,MAAQ;AACN,IAAA,OAAO,IAAA;AAAA,EACT;AACF;AAEA,eAAsB,qBAAA,CACpB,SAAA,EACA,MAAA,EACA,aAAA,GACE,oBAAA,EACsB;AACxB,EAAA,IAAI;AACF,IAAA,MAAM,WACJ,MAAM,aAAA;AAAA,MACJ,SAAA;AAAA,MACA;AAAA,QACE;AAAA;AACF,KACF;AAEF,IAAA,IACE,CAAC,QAAA,CAAS,EAAA,IACV,CAAC,cAAA,CAAe,QAAQ,CAAA,EACxB;AACA,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,MAAM,IAAA,GACJ,MAAM,QAAA,CAAS,IAAA,EAAK;AAEtB,IAAA,OAAO,mBAAA;AAAA,MACL,IAAA;AAAA,MACA;AAAA,KACF;AAAA,EACF,CAAA,CAAA,MAAQ;AACN,IAAA,OAAO,IAAA;AAAA,EACT;AACF","file":"open-graph.cjs","sourcesContent":["type FetchResource = (\n  url: string,\n  init?: {\n    signal?: AbortSignal;\n  },\n) => Promise<Response>;\n\nconst defaultFetchResource: FetchResource =\n  async (\n    url,\n    init,\n  ) =>\n    fetch(\n      url,\n      init,\n    );\n\nfunction isHtmlResponse(\n  response: Response,\n): boolean {\n  const contentType =\n    response.headers.get(\n      'content-type',\n    );\n\n  return (\n    contentType === null ||\n    contentType.includes('text/html')\n  );\n}\n\nfunction parseOpenGraphImage(\n  html: string,\n  sourceUrl: string,\n): string | null {\n  const document =\n    new DOMParser().parseFromString(\n      html,\n      'text/html',\n    );\n\n  const image =\n    document.head.querySelector(\n      'meta[property=\"og:image\"]',\n    );\n\n  const content =\n    image?.getAttribute('content');\n\n  if (!content) {\n    return null;\n  }\n\n  try {\n    const url =\n      new URL(\n        content,\n        sourceUrl,\n      );\n\n    if (\n      url.protocol !== 'http:' &&\n      url.protocol !== 'https:'\n    ) {\n      return null;\n    }\n\n    return url.toString();\n  } catch {\n    return null;\n  }\n}\n\nexport async function resolveOpenGraphImage(\n  sourceUrl: string,\n  signal?: AbortSignal,\n  fetchResource: FetchResource =\n    defaultFetchResource,\n): Promise<string | null> {\n  try {\n    const response =\n      await fetchResource(\n        sourceUrl,\n        {\n          signal,\n        },\n      );\n\n    if (\n      !response.ok ||\n      !isHtmlResponse(response)\n    ) {\n      return null;\n    }\n\n    const html =\n      await response.text();\n\n    return parseOpenGraphImage(\n      html,\n      sourceUrl,\n    );\n  } catch {\n    return null;\n  }\n}\n"]}

package/components/embed-viewer/open-graph.d.ts

@@ -0,0 +1,5 @@
+type FetchResource = (url: string, init?: {
+    signal?: AbortSignal;
+}) => Promise<Response>;
+export declare function resolveOpenGraphImage(sourceUrl: string, signal?: AbortSignal, fetchResource?: FetchResource): Promise<string | null>;
+export {};

package/components/embed-viewer/open-graph.js

@@ -0,0 +1,59 @@
+const defaultFetchResource = async (url, init) => fetch(
+  url,
+  init
+);
+function isHtmlResponse(response) {
+  const contentType = response.headers.get(
+    "content-type"
+  );
+  return contentType === null || contentType.includes("text/html");
+}
+function parseOpenGraphImage(html, sourceUrl) {
+  const document = new DOMParser().parseFromString(
+    html,
+    "text/html"
+  );
+  const image = document.head.querySelector(
+    'meta[property="og:image"]'
+  );
+  const content = image?.getAttribute("content");
+  if (!content) {
+    return null;
+  }
+  try {
+    const url = new URL(
+      content,
+      sourceUrl
+    );
+    if (url.protocol !== "http:" && url.protocol !== "https:") {
+      return null;
+    }
+    return url.toString();
+  } catch {
+    return null;
+  }
+}
+async function resolveOpenGraphImage(sourceUrl, signal, fetchResource = defaultFetchResource) {
+  try {
+    const response = await fetchResource(
+      sourceUrl,
+      {
+        signal
+      }
+    );
+    if (!response.ok || !isHtmlResponse(response)) {
+      return null;
+    }
+    const html = await response.text();
+    return parseOpenGraphImage(
+      html,
+      sourceUrl
+    );
+  } catch {
+    return null;
+  }
+}
+
+export { resolveOpenGraphImage };
+//# sourceMappingURL=open-graph.js.map
+//# sourceMappingURL=open-graph.js.map

package/components/embed-viewer/open-graph.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/embed-viewer/open-graph.ts"],"names":[],"mappings":"AAOA,MAAM,oBAAA,GACJ,OACE,GAAA,EACA,IAAA,KAEA,KAAA;AAAA,EACE,GAAA;AAAA,EACA;AACF,CAAA;AAEJ,SAAS,eACP,QAAA,EACS;AACT,EAAA,MAAM,WAAA,GACJ,SAAS,OAAA,CAAQ,GAAA;AAAA,IACf;AAAA,GACF;AAEF,EAAA,OACE,WAAA,KAAgB,IAAA,IAChB,WAAA,CAAY,QAAA,CAAS,WAAW,CAAA;AAEpC;AAEA,SAAS,mBAAA,CACP,MACA,SAAA,EACe;AACf,EAAA,MAAM,QAAA,GACJ,IAAI,SAAA,EAAU,CAAE,eAAA;AAAA,IACd,IAAA;AAAA,IACA;AAAA,GACF;AAEF,EAAA,MAAM,KAAA,GACJ,SAAS,IAAA,CAAK,aAAA;AAAA,IACZ;AAAA,GACF;AAEF,EAAA,MAAM,OAAA,GACJ,KAAA,EAAO,YAAA,CAAa,SAAS,CAAA;AAE/B,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,IAAI;AACF,IAAA,MAAM,MACJ,IAAI,GAAA;AAAA,MACF,OAAA;AAAA,MACA;AAAA,KACF;AAEF,IAAA,IACE,GAAA,CAAI,QAAA,KAAa,OAAA,IACjB,GAAA,CAAI,aAAa,QAAA,EACjB;AACA,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,OAAO,IAAI,QAAA,EAAS;AAAA,EACtB,CAAA,CAAA,MAAQ;AACN,IAAA,OAAO,IAAA;AAAA,EACT;AACF;AAEA,eAAsB,qBAAA,CACpB,SAAA,EACA,MAAA,EACA,aAAA,GACE,oBAAA,EACsB;AACxB,EAAA,IAAI;AACF,IAAA,MAAM,WACJ,MAAM,aAAA;AAAA,MACJ,SAAA;AAAA,MACA;AAAA,QACE;AAAA;AACF,KACF;AAEF,IAAA,IACE,CAAC,QAAA,CAAS,EAAA,IACV,CAAC,cAAA,CAAe,QAAQ,CAAA,EACxB;AACA,MAAA,OAAO,IAAA;AAAA,IACT;AAEA,IAAA,MAAM,IAAA,GACJ,MAAM,QAAA,CAAS,IAAA,EAAK;AAEtB,IAAA,OAAO,mBAAA;AAAA,MACL,IAAA;AAAA,MACA;AAAA,KACF;AAAA,EACF,CAAA,CAAA,MAAQ;AACN,IAAA,OAAO,IAAA;AAAA,EACT;AACF","file":"open-graph.js","sourcesContent":["type FetchResource = (\n  url: string,\n  init?: {\n    signal?: AbortSignal;\n  },\n) => Promise<Response>;\n\nconst defaultFetchResource: FetchResource =\n  async (\n    url,\n    init,\n  ) =>\n    fetch(\n      url,\n      init,\n    );\n\nfunction isHtmlResponse(\n  response: Response,\n): boolean {\n  const contentType =\n    response.headers.get(\n      'content-type',\n    );\n\n  return (\n    contentType === null ||\n    contentType.includes('text/html')\n  );\n}\n\nfunction parseOpenGraphImage(\n  html: string,\n  sourceUrl: string,\n): string | null {\n  const document =\n    new DOMParser().parseFromString(\n      html,\n      'text/html',\n    );\n\n  const image =\n    document.head.querySelector(\n      'meta[property=\"og:image\"]',\n    );\n\n  const content =\n    image?.getAttribute('content');\n\n  if (!content) {\n    return null;\n  }\n\n  try {\n    const url =\n      new URL(\n        content,\n        sourceUrl,\n      );\n\n    if (\n      url.protocol !== 'http:' &&\n      url.protocol !== 'https:'\n    ) {\n      return null;\n    }\n\n    return url.toString();\n  } catch {\n    return null;\n  }\n}\n\nexport async function resolveOpenGraphImage(\n  sourceUrl: string,\n  signal?: AbortSignal,\n  fetchResource: FetchResource =\n    defaultFetchResource,\n): Promise<string | null> {\n  try {\n    const response =\n      await fetchResource(\n        sourceUrl,\n        {\n          signal,\n        },\n      );\n\n    if (\n      !response.ok ||\n      !isHtmlResponse(response)\n    ) {\n      return null;\n    }\n\n    const html =\n      await response.text();\n\n    return parseOpenGraphImage(\n      html,\n      sourceUrl,\n    );\n  } catch {\n    return null;\n  }\n}\n"]}