tycho-components 0.36.6 → 0.36.8

package/dist/common/AppClarity/AppClarity.d.ts

@@ -0,0 +1,16 @@
+declare global {
+    interface Window {
+        clarity?: (...args: unknown[]) => void;
+    }
+}
+/**
+ * Microsoft Clarity loader — mirrors {@link AppAnalytics} (null render, injects
+ * the vendor tag on mount from a Vite env var). Set `VITE_APP_CLARITY_ID`.
+ *
+ * On top of the plain snippet it stitches every session of the logged-in Tycho
+ * user under their stable `uid` (decoded client-side from the `jwt_token_tycho`
+ * cookie) via `clarity('identify', …)`, so cross-module full-page navigations
+ * count as ONE identified user instead of N anonymous ones. The friendly name is
+ * PII — drop the last `identify` argument for a stricter privacy posture.
+ */
+export default function AppClarity(): null;

package/dist/common/AppClarity/AppClarity.js

@@ -0,0 +1,48 @@
+import { useEffect } from 'react';
+/**
+ * Microsoft Clarity loader — mirrors {@link AppAnalytics} (null render, injects
+ * the vendor tag on mount from a Vite env var). Set `VITE_APP_CLARITY_ID`.
+ *
+ * On top of the plain snippet it stitches every session of the logged-in Tycho
+ * user under their stable `uid` (decoded client-side from the `jwt_token_tycho`
+ * cookie) via `clarity('identify', …)`, so cross-module full-page navigations
+ * count as ONE identified user instead of N anonymous ones. The friendly name is
+ * PII — drop the last `identify` argument for a stricter privacy posture.
+ */
+export default function AppClarity() {
+    const CLARITY_ID = import.meta.env.VITE_APP_CLARITY_ID;
+    useEffect(() => {
+        if (!CLARITY_ID) {
+            console.warn('Microsoft Clarity project ID not set.');
+            return;
+        }
+        // Inject the official Clarity loader (same shape as Clarity's install snippet).
+        const loader = document.createElement('script');
+        loader.innerHTML =
+            `(function(c,l,a,r,i,t,y){c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};` +
+                `t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;` +
+                `y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y)})` +
+                `(window,document,"clarity","script","${CLARITY_ID}");`;
+        document.head.appendChild(loader);
+        // Identify the logged-in Tycho user so sessions stitch under one real id.
+        try {
+            const match = document.cookie.match(/(?:^|;\s*)jwt_token_tycho=([^;]+)/);
+            if (match) {
+                let b64 = match[1].split('.')[1].replace(/-/g, '+').replace(/_/g, '/');
+                b64 += '==='.slice((b64.length + 3) % 4);
+                const payload = JSON.parse(decodeURIComponent(atob(b64)
+                    .split('')
+                    .map((ch) => '%' + ('00' + ch.charCodeAt(0).toString(16)).slice(-2))
+                    .join('')));
+                if (payload?.uid) {
+                    window.clarity?.('identify', payload.uid, undefined, undefined, payload.name || undefined);
+                }
+            }
+            window.clarity?.('consent');
+        }
+        catch {
+            /* not logged in / unparseable — track anonymously */
+        }
+    }, [CLARITY_ID]);
+    return null;
+}

package/dist/common/AppClarity/index.d.ts

@@ -0,0 +1,2 @@
+import AppClarity from './AppClarity';
+export default AppClarity;

package/dist/common/AppClarity/index.js

@@ -0,0 +1,2 @@
+import AppClarity from './AppClarity';
+export default AppClarity;

package/dist/common/index.d.ts

@@ -1,4 +1,5 @@
 export { default as AppAnalytics } from './AppAnalytics';
+export { default as AppClarity } from './AppClarity';
 export { default as AppCard } from './AppCard/AppCard';
 export { default as AppClipboard } from './AppClipboard';
 export { default as AppColorpicker } from './AppColorpicker';

package/dist/common/index.js

@@ -1,4 +1,5 @@
 export { default as AppAnalytics } from './AppAnalytics';
+export { default as AppClarity } from './AppClarity';
 export { default as AppCard } from './AppCard/AppCard';
 export { default as AppClipboard } from './AppClipboard';
 export { default as AppColorpicker } from './AppColorpicker';

package/dist/features/TreeView/TreeView.d.ts

@@ -1,6 +1,6 @@
-import { Core } from "cytoscape";
-import { Struct } from "../../configs/types/Struct";
-import "./style.scss";
+import { Core } from 'cytoscape';
+import { Struct } from '../../configs/types/Struct';
+import './style.scss';
 type Props = {
     struct?: Struct;
     expression?: string;

package/dist/features/TreeView/TreeView.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { saveAs } from "file-saver";
-import html2canvas from "html2canvas";
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { IconButton } from "tycho-storybook";
-import AppPlaceholder from "../../common/AppPlaceholder";
-import DateUtils from "../../functions/DateUtils";
-import SentenceUtils from "../../functions/SentenceUtils";
-import TreeViewSearch from "./TreeViewSearch/TreeViewSearch";
-import CytoscapeTreeConverter from "./cytoscape/CytoscapeTreeConverter";
-import SyntreesCytoscape from "./cytoscape/SyntreesCytoscape";
-import "./style.scss";
-export default function TreeView({ struct, expression, selector = "canvas-tree", translations, wheelSensitivity, renderWithInfo = false, placeholder, cyRef, onClickExpression, onExpand, onReadyCustom, }) {
-    const { t } = useTranslation("tree");
+import { saveAs } from 'file-saver';
+import html2canvas from 'html2canvas';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { IconButton } from 'tycho-storybook';
+import AppPlaceholder from '../../common/AppPlaceholder';
+import DateUtils from '../../functions/DateUtils';
+import SentenceUtils from '../../functions/SentenceUtils';
+import TreeViewSearch from './TreeViewSearch/TreeViewSearch';
+import CytoscapeTreeConverter from './cytoscape/CytoscapeTreeConverter';
+import SyntreesCytoscape from './cytoscape/SyntreesCytoscape';
+import './style.scss';
+export default function TreeView({ struct, expression, selector = 'canvas-tree', translations, wheelSensitivity, renderWithInfo = false, placeholder, cyRef, onClickExpression, onExpand, onReadyCustom, }) {
+    const { t } = useTranslation('tree');
     const [cy, setCy] = useState(null);
     const [showInfo, setShowInfo] = useState(renderWithInfo);
     const [invalid, setInvalid] = useState();
@@ -27,7 +27,7 @@ export default function TreeView({ struct, expression, selector = "canvas-tree",
         setCy(null);
         const element = document.getElementById(selector);
         if (element)
-            element.innerHTML = "";
+            element.innerHTML = '';
         if (!struct)
             return;
         let tree;
@@ -60,8 +60,8 @@ export default function TreeView({ struct, expression, selector = "canvas-tree",
     const downloadPsd = () => {
         if (!expression)
             return;
-        const blob = new Blob([expression], { type: "text/plain;charset=utf-8" });
-        saveAs(blob, "sentence.psd");
+        const blob = new Blob([expression], { type: 'text/plain;charset=utf-8' });
+        saveAs(blob, 'sentence.psd');
     };
     const generateImage = () => {
         if (!cy)
@@ -70,13 +70,13 @@ export default function TreeView({ struct, expression, selector = "canvas-tree",
         if (!cyContainer)
             return;
         html2canvas(cyContainer, {
-            backgroundColor: "white",
+            backgroundColor: 'white',
         }).then((canvas) => {
             canvas.toBlob((blob) => {
                 if (blob === null)
                     return;
-                saveAs(blob, "tree.jpg");
-            }, "image/jpeg", 1.0);
+                saveAs(blob, 'tree.jpg');
+            }, 'image/jpeg', 1.0);
         });
     };
     const reset = () => {
@@ -92,9 +92,9 @@ export default function TreeView({ struct, expression, selector = "canvas-tree",
             if (!token.ec) {
                 const leafId = token.p?.toString();
                 const converter = new CytoscapeTreeConverter();
-                converter["extraInfo"] = extraInfo;
+                converter['extraInfo'] = extraInfo;
                 const newLabel = converter.getLabelLeaf(token);
-                thisCy.$id(leafId).data("label", newLabel);
+                thisCy.$id(leafId).data('label', newLabel);
             }
         });
     };
@@ -116,51 +116,51 @@ export default function TreeView({ struct, expression, selector = "canvas-tree",
         load();
     }, [struct]);
     if (!struct) {
-        return (_jsx(AppPlaceholder, { text: placeholder || t("placeholder.sentence.notparsed") }));
+        return (_jsx(AppPlaceholder, { text: placeholder || t('placeholder.sentence.notparsed') }));
     }
-    return (_jsxs("div", { className: "tree-view-container", children: [invalid && (_jsx("div", { className: "tree-placeholder-overlay", children: _jsx(AppPlaceholder, { text: placeholder || t("placeholder.sentence.notparsed") }) })), _jsx("div", { className: "floating-buttons", children: cy &&
+    return (_jsxs("div", { className: "tree-view-container", children: [invalid && (_jsx("div", { className: "tree-placeholder-overlay", children: _jsx(AppPlaceholder, { text: placeholder || t('placeholder.sentence.notparsed') }) })), _jsx("div", { className: "floating-buttons", children: cy &&
                     getButtons(generateImage, reset, onClickExpression || downloadPsd, toggleInfo, onExpand, expression, openSearchModal)
                         .filter((btn) => btn.condition)
                         .map((btn, i) => {
-                        return (_jsx(IconButton, { name: btn.icon, title: t(btn.title), onClick: btn.onClick, size: "small", mode: "ghost" }, i));
+                        return (_jsx(IconButton, { name: btn.icon, title: t(btn.title), onClick: btn.onClick, size: "medium", iconSize: "medium", mode: "ghost" }, i));
                     }) }), showSearchModal && cy && (_jsx(TreeViewSearch, { struct: struct, cy: cy, onClose: closeSearchModal, searchCriteria: searchCriteria, setSearchCriteria: setSearchCriteria })), _jsx("div", { id: selector, className: "canvas-tree" }), showInfo && (_jsxs("div", { className: "info", children: [_jsx("span", { children: SentenceUtils.getAsText(struct) }), translations &&
-                        Object.entries(translations).map(([k, v]) => (_jsxs("div", { className: "translation", children: [_jsxs("b", { children: [k, ":"] }), _jsx("span", { children: v })] }, k))), struct.parsed && (_jsxs("span", { className: "date", children: [t("date.parsed"), " ", DateUtils.formatDateTime(struct.parsed, "dd/MM/yyyy HH:mm:ss")] }))] }))] }));
+                        Object.entries(translations).map(([k, v]) => (_jsxs("div", { className: "translation", children: [_jsxs("b", { children: [k, ":"] }), _jsx("span", { children: v })] }, k))), struct.parsed && (_jsxs("span", { className: "date", children: [t('date.parsed'), ' ', DateUtils.formatDateTime(struct.parsed, 'dd/MM/yyyy HH:mm:ss')] }))] }))] }));
 }
 const getButtons = (generateImage, reset, downloadPsd, toggleInfo, onExpand, expression, openSearchModal) => [
     {
         condition: true,
-        title: "button.download.tree",
+        title: 'button.download.tree',
         onClick: generateImage,
-        icon: "download",
+        icon: 'download',
     },
     {
         condition: true,
-        title: "button.recenter.tree",
+        title: 'button.recenter.tree',
         onClick: reset,
-        icon: "center_focus_weak",
+        icon: 'center_focus_weak',
     },
     {
         condition: !!expression,
-        title: "button.download.penn",
+        title: 'button.download.penn',
         onClick: downloadPsd,
-        icon: "graph_4",
+        icon: 'graph_4',
     },
     {
         condition: !!onExpand,
-        title: "button.expand.tree",
+        title: 'button.expand.tree',
         onClick: onExpand || (() => { }),
-        icon: "open_in_full",
+        icon: 'open_in_full',
     },
     {
         condition: true,
-        title: "button.info",
+        title: 'button.info',
         onClick: toggleInfo,
-        icon: "info",
+        icon: 'info',
     },
     {
         condition: true,
-        title: "button.search",
+        title: 'button.search',
         onClick: openSearchModal || (() => { }),
-        icon: "search",
+        icon: 'search',
     },
 ];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tycho-components",
   "private": false,
-  "version": "0.36.6",
+  "version": "0.36.8",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {