@weavix/cli 0.4.0 → 0.5.1

package/build/templates/_shared/src/themes/yandex-360.scss

@@ -0,0 +1,197 @@
+@use './yandex-360/light' as *;
+@use './yandex-360/light-hc' as *;
+@use './yandex-360/dark' as *;
+@use './yandex-360/dark-hc' as *;
+
+@mixin ya-360-colors-light {
+    @include ya-360-colors-private-light;
+
+    --g-color-base-background: rgb(255, 255, 255);
+    --g-color-base-brand: var(--g-color-private-blue-550-solid);
+    --g-color-base-brand-hover: var(--g-color-private-blue-600-solid);
+    --g-color-base-selection: var(--g-color-private-blue-100);
+    --g-color-base-selection-hover: var(--g-color-private-blue-200);
+    --g-color-line-brand: var(--g-color-private-blue-550-solid);
+    --g-color-text-brand: var(--g-color-private-blue-600-solid);
+    --g-color-text-brand-heavy: var(--g-color-private-blue-700-solid);
+    --g-color-text-brand-contrast: var(--g-color-text-light-primary);
+    --g-color-text-link: var(--g-color-private-blue-600-solid);
+    --g-color-text-link-hover: var(--g-color-private-blue-800-solid);
+
+    --gn-aside-header-decoration-collapsed-background-color: var(--g-color-private-blue-100);
+    --gn-aside-header-decoration-expanded-background-color: var(--g-color-private-blue-100);
+    --gn-aside-header-item-background-color-hover: var(--g-color-private-black-50);
+    --gn-aside-header-item-current-background-color: var(--g-color-private-blue-100);
+
+    --gil-color-object-base: var(--g-color-private-blue-550-solid);
+    --gil-color-object-accent-heavy: var(--g-color-private-blue-750-solid);
+    --gil-color-object-hightlight: var(--g-color-private-blue-350-solid);
+    --gil-color-shadow-over-object: var(--g-color-private-blue-700-solid);
+    --gil-color-background-lines: var(--g-color-private-black-450-solid);
+    --gil-color-background-shapes: var(--g-color-private-black-50-solid);
+    --gil-color-object-accent-light: var(--g-color-private-white-1000-solid);
+    --gil-color-object-danger: var(--g-color-private-red-550-solid);
+}
+
+@mixin ya-360-colors-light-hc {
+    @include ya-360-colors-private-light-hc;
+
+    --g-color-base-background: rgb(255, 255, 255);
+    --g-color-base-brand: var(--g-color-private-blue-600-solid);
+    --g-color-base-brand-hover: var(--g-color-private-blue-800-solid);
+    --g-color-base-selection: var(--g-color-private-blue-250);
+    --g-color-base-selection-hover: var(--g-color-private-blue-350);
+    --g-color-line-brand: var(--g-color-private-blue-600-solid);
+    --g-color-text-brand: var(--g-color-private-blue-650-solid);
+    --g-color-text-brand-heavy: var(--g-color-private-blue-900-solid);
+    --g-color-text-brand-contrast: var(--g-color-text-light-primary);
+    --g-color-text-link: var(--g-color-private-blue-650-solid);
+    --g-color-text-link-hover: var(--g-color-private-blue-850-solid);
+
+    --gn-aside-header-decoration-collapsed-background-color: var(--g-color-private-blue-250);
+    --gn-aside-header-decoration-expanded-background-color: var(--g-color-private-blue-250);
+    --gn-aside-header-item-current-background-color: var(--g-color-private-blue-250);
+    --gn-aside-header-item-background-color-hover: var(--g-color-private-black-150);
+
+    --gil-color-object-base: var(--g-color-private-blue-550-solid);
+    --gil-color-object-accent-heavy: var(--g-color-private-blue-750-solid);
+    --gil-color-object-hightlight: var(--g-color-private-blue-350-solid);
+    --gil-color-shadow-over-object: var(--g-color-private-blue-700-solid);
+    --gil-color-background-lines: var(--g-color-private-black-450-solid);
+    --gil-color-background-shapes: var(--g-color-private-black-50-solid);
+    --gil-color-object-accent-light: var(--g-color-private-white-1000-solid);
+    --gil-color-object-danger: var(--g-color-private-red-550-solid);
+}
+
+@mixin ya-360-colors-dark {
+    @include ya-360-colors-private-dark;
+
+    --g-color-base-background: rgb(45, 44, 51);
+    --g-color-base-brand: var(--g-color-private-blue-450-solid);
+    --g-color-base-brand-hover: var(--g-color-private-blue-600-solid);
+    --g-color-base-selection: var(--g-color-private-blue-150);
+    --g-color-base-selection-hover: var(--g-color-private-blue-200);
+    --g-color-line-brand: var(--g-color-private-blue-550-solid);
+    --g-color-text-brand: var(--g-color-private-blue-550-solid);
+    --g-color-text-brand-heavy: var(--g-color-private-blue-600-solid);
+    --g-color-text-brand-contrast: var(--g-color-text-light-primary);
+    --g-color-text-link: var(--g-color-private-blue-550-solid);
+    --g-color-text-link-hover: var(--g-color-private-blue-700-solid);
+
+    --gn-aside-header-decoration-collapsed-background-color: var(--g-color-private-blue-150);
+    --gn-aside-header-decoration-expanded-background-color: var(--g-color-private-blue-150);
+    --gn-aside-header-item-current-background-color: var(--g-color-private-blue-150);
+    --gn-aside-header-item-background-color-hover: var(--g-color-private-white-100);
+
+    --gil-color-object-base: var(--g-color-private-blue-550-solid);
+    --gil-color-object-accent-heavy: var(--g-color-private-blue-350-solid);
+    --gil-color-object-hightlight: var(--g-color-private-blue-650-solid);
+    --gil-color-shadow-over-object: var(--g-color-private-blue-300-solid);
+    --gil-color-background-lines: var(--g-color-private-white-550-solid);
+    --gil-color-background-shapes: var(--g-color-private-white-200-solid);
+    --gil-color-object-accent-light: var(--g-color-private-white-1000-solid);
+    --gil-color-object-danger: var(--g-color-private-red-550-solid);
+}
+
+@mixin ya-360-colors-dark-hc {
+    @include ya-360-colors-private-dark-hc;
+
+    --g-color-base-background: rgb(34, 35, 38);
+    --g-color-base-brand: var(--g-color-private-blue-450-solid);
+    --g-color-base-brand-hover: var(--g-color-private-blue-650-solid);
+    --g-color-base-selection: var(--g-color-private-blue-250);
+    --g-color-base-selection-hover: var(--g-color-private-blue-400);
+    --g-color-line-brand: var(--g-color-private-blue-550-solid);
+    --g-color-text-brand: var(--g-color-private-blue-650-solid);
+    --g-color-text-brand-heavy: var(--g-color-private-blue-850-solid);
+    --g-color-text-brand-contrast: var(--g-color-text-light-primary);
+    --g-color-text-link: var(--g-color-private-blue-650-solid);
+    --g-color-text-link-hover: var(--g-color-private-blue-800-solid);
+
+    --gn-aside-header-decoration-collapsed-background-color: var(--g-color-private-blue-250);
+    --gn-aside-header-decoration-expanded-background-color: var(--g-color-private-blue-250);
+    --gn-aside-header-item-current-background-color: var(--g-color-private-blue-250);
+    --gn-aside-header-item-background-color-hover: var(--g-color-private-white-250);
+
+    --gil-color-object-base: var(--g-color-private-blue-550-solid);
+    --gil-color-object-accent-heavy: var(--g-color-private-blue-750-solid);
+    --gil-color-object-hightlight: var(--g-color-private-blue-350-solid);
+    --gil-color-shadow-over-object: var(--g-color-private-blue-300-solid);
+    --gil-color-background-lines: var(--g-color-private-white-550-solid);
+    --gil-color-background-shapes: var(--g-color-private-white-200-solid);
+    --gil-color-object-accent-light: var(--g-color-private-white-1000-solid);
+    --gil-color-object-danger: var(--g-color-private-red-550-solid);
+}
+
+.g-root {
+    --g-font-family-sans: 'YS Text', 'Helvetica Neue', 'Arial', 'Helvetica', sans-serif;
+    --g-font-family-monospace:
+        'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Ubuntu Mono', 'DejaVu Sans Mono',
+        'Courier New', 'Courier', monospace;
+
+    --g-text-header-font-family:
+        'YS Display Wide', 'Helvetica Neue', 'Arial', 'Helvetica', sans-serif;
+    --g-text-subheader-font-family:
+        'YS Display Wide', 'Helvetica Neue', 'Arial', 'Helvetica', sans-serif;
+
+    --g-text-header-font-weight: 500;
+    --g-text-subheader-font-weight: 500;
+    --g-text-display-font-weight: 500;
+    --g-text-accent-font-weight: 500;
+
+    --g-text-body-1-font-size: 14px;
+    --g-text-body-1-line-height: 18px;
+
+    --g-text-body-2-font-size: 14px;
+    --g-text-body-2-line-height: 20px;
+
+    --g-text-body-3-font-size: 16px;
+    --g-text-body-3-line-height: 24px;
+
+    --g-text-body-short-font-size: 14px;
+    --g-text-body-short-line-height: 18px;
+
+    --g-text-caption-1-font-size: 11px;
+    --g-text-caption-1-line-height: 12px;
+
+    --g-text-caption-2-font-size: 12px;
+    --g-text-caption-2-line-height: 16px;
+
+    --g-text-subheader-1-font-size: 14px;
+    --g-text-subheader-1-line-height: 18px;
+
+    --g-text-subheader-2-font-size: 16px;
+    --g-text-subheader-2-line-height: 20px;
+
+    --g-text-subheader-3-font-size: 16px;
+    --g-text-subheader-3-line-height: 24px;
+
+    --g-text-subheader-3-font: 700 var(--g-text-subheader-3-font-size) /
+        var(--g-text-subheader-3-font-size) var(--g-text-subheader-font-family);
+
+    --g-border-radius-xs: 1000px;
+    --g-border-radius-s: 8px;
+    --g-border-radius-m: 10px;
+    --g-border-radius-l: 12px;
+    --g-border-radius-xl: 16px;
+    --g-border-radius-2xl: 24px;
+
+    --gn-aside-header-background-color: var(--g-color-base-background);
+    --gn-aside-header-item-icon-color: var(--g-color-text-misc);
+
+    &_theme_light {
+        @include ya-360-colors-light;
+    }
+
+    &_theme_light-hc {
+        @include ya-360-colors-light-hc;
+    }
+
+    &_theme_dark {
+        @include ya-360-colors-dark;
+    }
+
+    &_theme_dark-hc {
+        @include ya-360-colors-dark-hc;
+    }
+}

package/build/templates/_shared/src/themes/ys-text.scss

@@ -0,0 +1,79 @@
+@font-face {
+    font-family: 'YS Text';
+    src:
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-light.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-light.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Text';
+    src:
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-light-italic.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-light-italic.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Text';
+    src:
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-regular.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-regular.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Text';
+    src:
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-regular-italic.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-regular-italic.woff') format('woff');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Text';
+    src:
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-medium.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-medium.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Text';
+    src:
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-medium-italic.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-medium-italic.woff') format('woff');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Text';
+    src:
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-bold.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-bold.woff') format('woff');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+}
+
+@font-face {
+    font-family: 'YS Text';
+    src:
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-bold-italic.woff2') format('woff2'),
+        url('https://yastatic.net/s3/home/fonts/ys/4/text-bold-italic.woff') format('woff');
+    font-weight: 700;
+    font-style: italic;
+    font-display: swap;
+}

package/build/templates/_shared/vite.config.ts

@@ -7,6 +7,7 @@ import react from '@vitejs/plugin-react';
 import type { ViteDevServer } from 'vite';
 import { defineConfig } from 'vite';
 import svgr from 'vite-plugin-svgr';
+import { proxyPlugin } from './proxy';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -14,13 +15,15 @@ export default defineConfig(() => {
     return {
         base: './',
         server: {
+            port: 5173,
+            strictPort: true,
             cors: true,
             headers: {
                 'Access-Control-Allow-Origin': '*',
                 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
                 'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
                 'Content-Security-Policy':
-                    "default-src 'self'; script-src 'self' 'unsafe-inline'; connect-src 'self';style-src 'self' 'unsafe-inline';",
+                    "default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src data: blob: *; font-src 'self' data:; media-src 'self' blob:; connect-src 'self'; form-action 'self'; frame-src 'none'; base-uri 'none'; object-src 'none'; worker-src 'self' blob:; manifest-src 'none'",
             },
         },
         plugins: [
@@ -48,6 +51,7 @@ export default defineConfig(() => {
                     );
                 },
             },
+            proxyPlugin(),
         ],
         build: {
             sourcemap: true,

package/build/templates/attachment.viewer.action/index.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="description" content="Web site created using vite" />
-        <title>Default Plugin</title>
+        <title>Attachment Viewer Action Plugin</title>
     </head>
     <body class="g-root g-root_theme_dark">
         <noscript>You need to enable JavaScript to run this app.</noscript>

package/build/templates/attachment.viewer.action/src/App.tsx

@@ -1,12 +1,7 @@
 import { useCallback } from 'react';
 
-import { Card, DefinitionList, ThemeProvider, Text as Typography } from '@gravity-ui/uikit';
-import {
-    getField,
-    hostApi,
-    trackerApi,
-    useTrackerPluginContext,
-} from '@yandex-data-ui/tracker-plugin-sdk-react';
+import { Button, Card, DefinitionList, ThemeProvider, Text as Typography } from '@gravity-ui/uikit';
+import { hostApi, trackerApi, useTrackerPluginContext } from '@weavix/tracker-plugin-sdk-react';
 
 const App = () => {
     const { theme, slotContext } = useTrackerPluginContext<'attachment.viewer.action'>();
@@ -26,30 +21,25 @@ const App = () => {
         return null;
     }
 
-    const attachmentBlob = getField<string>(slotContext, 'attachmentBlob');
-
-    const id = getField<string>(slotContext, 'meta.id', 'Без идентификатора');
-    const mimetype = getField<string>(slotContext, 'meta.mimetype', 'Без типа');
-    const url = getField<string>(slotContext, 'meta.url', 'Без ссылки');
-    const name = getField<string>(slotContext, 'meta.name', 'Без названия');
-    const size = getField<number>(slotContext, 'meta.size', 0);
-    const date = getField<string>(slotContext, 'meta.date', 'Без даты');
-
     return (
         <ThemeProvider theme={theme}>
-            <div style={{ width: '800px', padding: '50px' }}>
+            <div>
                 <Card style={{ padding: '20px' }}>
                     <Typography variant="header-1" as="div" style={{ marginBottom: '16px' }}>
-                        Текущий контекст в проде
+                        Базовый контекст (contextLevel: basic)
                     </Typography>
                     <DefinitionList>
-                        <DefinitionList.Item name="Идентификатор">{id}</DefinitionList.Item>
-                        <DefinitionList.Item name="Название">{name}</DefinitionList.Item>
-                        <DefinitionList.Item name="Тип">{mimetype}</DefinitionList.Item>
-                        <DefinitionList.Item name="Адрес">{url}</DefinitionList.Item>
-                        <DefinitionList.Item name="Размер">{size}</DefinitionList.Item>
-                        <DefinitionList.Item name="Дата">{date}</DefinitionList.Item>
+                        <DefinitionList.Item name="ID вложения">
+                            {slotContext.id}
+                        </DefinitionList.Item>
                     </DefinitionList>
+                    <Button
+                        view="action"
+                        style={{ marginTop: '16px' }}
+                        onClick={() => save(new Blob(['Hello from plugin']), 'hello.txt')}
+                    >
+                        Добавить пример файла
+                    </Button>
                 </Card>
             </div>
         </ThemeProvider>

package/build/templates/board.tab/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="description" content="Web site created using vite" />
+        <title>Board Tab Plugin</title>
+    </head>
+    <body class="g-root g-root_theme_dark">
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>

package/build/templates/board.tab/src/App.tsx

@@ -0,0 +1,27 @@
+import { Card, DefinitionList, ThemeProvider, Text as Typography } from '@gravity-ui/uikit';
+import { useTrackerPluginContext } from '@weavix/tracker-plugin-sdk-react';
+
+const App = () => {
+    const { theme, slotContext } = useTrackerPluginContext<'board.tab'>();
+
+    if (!slotContext) {
+        return null;
+    }
+
+    return (
+        <ThemeProvider theme={theme}>
+            <div>
+                <Card style={{ padding: '20px' }}>
+                    <Typography variant="header-1" as="div" style={{ marginBottom: '16px' }}>
+                        Базовый контекст (contextLevel: basic)
+                    </Typography>
+                    <DefinitionList>
+                        <DefinitionList.Item name="ID">{slotContext.id}</DefinitionList.Item>
+                    </DefinitionList>
+                </Card>
+            </div>
+        </ThemeProvider>
+    );
+};
+
+export default App;

package/build/templates/default/src/App.tsx

@@ -1,5 +1,5 @@
 import { ThemeProvider } from '@gravity-ui/uikit';
-import { useTrackerPluginContext } from '@yandex-data-ui/tracker-plugin-sdk-react';
+import { useTrackerPluginContext } from '@weavix/tracker-plugin-sdk-react';
 
 const App = () => {
     const { theme } = useTrackerPluginContext();

package/build/templates/goal.action/index.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="description" content="Web site created using vite" />
-        <title>Project Actions Plugin</title>
+        <title>Goal Action Plugin</title>
     </head>
     <body class="g-root g-root_theme_dark">
         <noscript>You need to enable JavaScript to run this app.</noscript>

package/build/templates/goal.action/src/App.tsx

@@ -1,5 +1,5 @@
 import { Card, DefinitionList, ThemeProvider, Text as Typography } from '@gravity-ui/uikit';
-import { getField, useTrackerPluginContext } from '@yandex-data-ui/tracker-plugin-sdk-react';
+import { useTrackerPluginContext } from '@weavix/tracker-plugin-sdk-react';
 
 const App = () => {
     const { theme, slotContext } = useTrackerPluginContext<'goal.action'>();
@@ -8,27 +8,15 @@ const App = () => {
         return null;
     }
 
-    const summary = getField<string>(slotContext, 'fields.summary.value', 'Без названия');
-    const description = getField<string>(
-        slotContext,
-        'fields.description.value',
-        'Пустое описание',
-    );
-    const status = getField<string>(slotContext, 'fields.entityStatus.value', 'Не указан');
-    const progress = getField<number>(slotContext, 'fields.progressPercentage.value', 0);
-
     return (
         <ThemeProvider theme={theme}>
-            <div style={{ width: '800px', padding: '50px' }}>
+            <div>
                 <Card style={{ padding: '20px' }}>
                     <Typography variant="header-1" as="div" style={{ marginBottom: '16px' }}>
-                        Текущий контекст в проде
+                        Базовый контекст (contextLevel: basic)
                     </Typography>
                     <DefinitionList>
-                        <DefinitionList.Item name="Название">{summary}</DefinitionList.Item>
-                        <DefinitionList.Item name="Описание">{description}</DefinitionList.Item>
-                        <DefinitionList.Item name="Статус">{status}</DefinitionList.Item>
-                        <DefinitionList.Item name="Прогресс">{progress}</DefinitionList.Item>
+                        <DefinitionList.Item name="ID">{slotContext.entityId}</DefinitionList.Item>
                     </DefinitionList>
                 </Card>
             </div>

package/build/templates/goal.block/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="description" content="Web site created using vite" />
+        <title>Goal Block Plugin</title>
+    </head>
+    <body class="g-root g-root_theme_dark">
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>

package/build/templates/goal.block/src/App.tsx

@@ -0,0 +1,27 @@
+import { Card, DefinitionList, ThemeProvider, Text as Typography } from '@gravity-ui/uikit';
+import { useTrackerPluginContext } from '@weavix/tracker-plugin-sdk-react';
+
+const App = () => {
+    const { theme, slotContext } = useTrackerPluginContext<'goal.block'>();
+
+    if (!slotContext) {
+        return null;
+    }
+
+    return (
+        <ThemeProvider theme={theme}>
+            <div>
+                <Card style={{ padding: '20px' }}>
+                    <Typography variant="header-1" as="div" style={{ marginBottom: '16px' }}>
+                        Базовый контекст (contextLevel: basic)
+                    </Typography>
+                    <DefinitionList>
+                        <DefinitionList.Item name="ID">{slotContext.entityId}</DefinitionList.Item>
+                    </DefinitionList>
+                </Card>
+            </div>
+        </ThemeProvider>
+    );
+};
+
+export default App;

package/build/templates/goal.editor.action/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="description" content="Web site created using vite" />
+        <title>Goal Editor Action Plugin</title>
+    </head>
+    <body class="g-root g-root_theme_dark">
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>

package/build/templates/goal.editor.action/src/App.tsx

@@ -0,0 +1,56 @@
+import { useCallback, useState } from 'react';
+
+import {
+    Button,
+    Card,
+    DefinitionList,
+    TextArea,
+    ThemeProvider,
+    Text as Typography,
+} from '@gravity-ui/uikit';
+import { hostApi, useTrackerPluginContext } from '@weavix/tracker-plugin-sdk-react';
+
+const App = () => {
+    const { theme, slotContext } = useTrackerPluginContext<'goal.editor.action'>('basic');
+    const [text, setText] = useState('');
+
+    const handleInsert = useCallback(() => {
+        hostApi.close({ text });
+    }, [text]);
+
+    if (!slotContext) {
+        return null;
+    }
+
+    return (
+        <ThemeProvider theme={theme}>
+            <div style={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: '16px' }}>
+                <Card style={{ padding: '16px' }}>
+                    <Typography variant="header-1" as="div" style={{ marginBottom: '12px' }}>
+                        Контекст цели
+                    </Typography>
+                    <DefinitionList>
+                        <DefinitionList.Item name="ID">{slotContext.entityId}</DefinitionList.Item>
+                    </DefinitionList>
+                </Card>
+                <Card style={{ padding: '16px' }}>
+                    <Typography variant="header-1" as="div" style={{ marginBottom: '12px' }}>
+                        Вставить текст в редактор
+                    </Typography>
+                    <TextArea
+                        value={text}
+                        onUpdate={setText}
+                        placeholder="Введите текст для вставки в редактор..."
+                        minRows={4}
+                        style={{ marginBottom: '12px' }}
+                    />
+                    <Button view="action" onClick={handleInsert} disabled={!text}>
+                        Вставить
+                    </Button>
+                </Card>
+            </div>
+        </ThemeProvider>
+    );
+};
+
+export default App;

package/build/templates/goal.tab/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="description" content="Web site created using vite" />
+        <title>Goal Tab Plugin</title>
+    </head>
+    <body class="g-root g-root_theme_dark">
+        <noscript>You need to enable JavaScript to run this app.</noscript>
+        <div id="root"></div>
+        <script type="module" src="/src/main.tsx"></script>
+    </body>
+</html>

package/build/templates/goal.tab/src/App.tsx

@@ -0,0 +1,27 @@
+import { Card, DefinitionList, ThemeProvider, Text as Typography } from '@gravity-ui/uikit';
+import { useTrackerPluginContext } from '@weavix/tracker-plugin-sdk-react';
+
+const App = () => {
+    const { theme, slotContext } = useTrackerPluginContext<'goal.tab'>();
+
+    if (!slotContext) {
+        return null;
+    }
+
+    return (
+        <ThemeProvider theme={theme}>
+            <div>
+                <Card style={{ padding: '20px' }}>
+                    <Typography variant="header-1" as="div" style={{ marginBottom: '16px' }}>
+                        Базовый контекст (contextLevel: basic)
+                    </Typography>
+                    <DefinitionList>
+                        <DefinitionList.Item name="ID">{slotContext.entityId}</DefinitionList.Item>
+                    </DefinitionList>
+                </Card>
+            </div>
+        </ThemeProvider>
+    );
+};
+
+export default App;

package/build/templates/issue.action/index.html

@@ -4,7 +4,7 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="description" content="Web site created using vite" />
-        <title>Issue Actions Plugin</title>
+        <title>Issue Action Plugin</title>
     </head>
     <body class="g-root g-root_theme_dark">
         <noscript>You need to enable JavaScript to run this app.</noscript>