@weavix/tracker-components 0.1.0 → 0.1.2

package/build/esm/components/Icon/IssueTypeIcon/IssueTypeIcon.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import { getConfig } from '@gravity-ui/uikit';
 import { useLocalizedString } from "./../../../hooks/useLocalizedString";
-import { cnIcon } from "../Icon.classname";
 import { IconRefuge } from "../IconRefuge";
 import { cnIssueTypeIcon } from "./IssueTypeIcon.classname";
 import { defaultMessages } from "./i18n";
@@ -25,47 +24,28 @@ import taskIcon from "../../../assets/icons/issue-type/task";
 import technicalDebtIcon from "../../../assets/icons/issue-type/technical-debt";
 import "./IssueTypeIcon.css";
 import { jsx as _jsx } from "react/jsx-runtime";
-var getIconData = function getIconData(issueType) {
-  switch (issueType) {
-    case 'bug':
-      return bugIcon;
-    case 'design':
-      return designIcon;
-    case 'epic':
-      return epicIcon;
-    case 'improvement':
-      return improvementIcon;
-    case 'incident':
-      return incidentIcon;
-    case 'info':
-      return infoIcon;
-    case 'newFeature':
-      return newFeatureIcon;
-    case 'query':
-      return queryIcon;
-    case 'refactoring':
-      return refactoringIcon;
-    case 'release':
-      return releaseIcon;
-    case 'research':
-      return researchIcon;
-    case 'serviceRequest':
-      return serviceRequestIcon;
-    case 'story':
-      return storyIcon;
-    case 'subBug':
-      return subbugIcon;
-    case 'subTask':
-      return subtaskIcon;
-    case 'technicalDebt':
-      return technicalDebtIcon;
-    case 'milestone':
-      return milestoneIcon;
-    default:
-      return taskIcon;
-  }
+var ISSUE_TYPE_ICONS = {
+  bug: bugIcon,
+  design: designIcon,
+  epic: epicIcon,
+  improvement: improvementIcon,
+  incident: incidentIcon,
+  info: infoIcon,
+  milestone: milestoneIcon,
+  newFeature: newFeatureIcon,
+  query: queryIcon,
+  refactoring: refactoringIcon,
+  release: releaseIcon,
+  research: researchIcon,
+  serviceRequest: serviceRequestIcon,
+  story: storyIcon,
+  subBug: subbugIcon,
+  subTask: subtaskIcon,
+  task: taskIcon,
+  technicalDebt: technicalDebtIcon
 };
 export var IssueTypeIcon = function IssueTypeIcon(_ref) {
+  var _ISSUE_TYPE_ICONS$iss;
   var className = _ref.className,
     containerClassName = _ref.containerClassName,
     _ref$issueType = _ref.issueType,
@@ -76,20 +56,20 @@ export var IssueTypeIcon = function IssueTypeIcon(_ref) {
   var config = getConfig();
   var _useLocalizedString = useLocalizedString(defaultMessages, config.lang),
     t = _useLocalizedString.t;
-  var ariaLabel = title && t('type-label', {
-    type: title
-  });
+  var ariaLabel = title ? t('type-label', {
+    type: issueType
+  }) : undefined;
   return /*#__PURE__*/_jsx(IconRefuge, {
-    className: cnIcon({
-      issueType: issueType
-    }, [cnIssueTypeIcon({
+    className: cnIssueTypeIcon({
       type: issueType
-    }, className)]),
+    }, className),
     containerClassName: containerClassName,
-    data: getIconData(issueType),
+    data: (_ISSUE_TYPE_ICONS$iss = ISSUE_TYPE_ICONS[issueType]) !== null && _ISSUE_TYPE_ICONS$iss !== void 0 ? _ISSUE_TYPE_ICONS$iss : taskIcon,
     refugeSize: size,
-    "aria-label": ariaLabel
+    title: title,
+    "aria-label": ariaLabel,
+    "aria-hidden": !title || undefined
   });
 };
-IssueTypeIcon.displayName = cnIcon();
+IssueTypeIcon.displayName = 'IssueTypeIcon';
 // #sourceMappingURL=IssueTypeIcon.js.map

package/build/esm/components/Icon/IssueTypeIcon/IssueTypeIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","getConfig","useLocalizedString","cnIcon","IconRefuge","cnIssueTypeIcon","defaultMessages","bugIcon","designIcon","epicIcon","improvementIcon","incidentIcon","infoIcon","milestoneIcon","newFeatureIcon","queryIcon","refactoringIcon","releaseIcon","researchIcon","serviceRequestIcon","storyIcon","subbugIcon","subtaskIcon","taskIcon","technicalDebtIcon","jsx","_jsx","getIconData","issueType","IssueTypeIcon","_ref","className","containerClassName","_ref$issueType","_ref$size","size","title","config","_useLocalizedString","lang","t","ariaLabel","type","data","refugeSize","displayName"],"sources":["IssueTypeIcon.tsx"],"sourcesContent":["import type {FC} from 'react';\nimport React from 'react';\n\nimport {getConfig} from '@gravity-ui/uikit';\n\nimport {useLocalizedString} from '~/src/hooks/useLocalizedString';\n\nimport {cnIcon} from '../Icon.classname';\nimport type {IconRefugeProps} from '../IconRefuge';\nimport {IconRefuge} from '../IconRefuge';\n\nimport {cnIssueTypeIcon} from './IssueTypeIcon.classname';\nimport {defaultMessages} from './i18n';\nimport type {IssueType} from './types';\n\nimport bugIcon from '../../../../assets/icons/issue-type/bug.svg';\nimport designIcon from '../../../../assets/icons/issue-type/design.svg';\nimport epicIcon from '../../../../assets/icons/issue-type/epic.svg';\nimport improvementIcon from '../../../../assets/icons/issue-type/improvement.svg';\nimport incidentIcon from '../../../../assets/icons/issue-type/incident.svg';\nimport infoIcon from '../../../../assets/icons/issue-type/info.svg';\nimport milestoneIcon from '../../../../assets/icons/issue-type/milestone.svg';\nimport newFeatureIcon from '../../../../assets/icons/issue-type/new-feature.svg';\nimport queryIcon from '../../../../assets/icons/issue-type/query.svg';\nimport refactoringIcon from '../../../../assets/icons/issue-type/refactoring.svg';\nimport releaseIcon from '../../../../assets/icons/issue-type/release.svg';\nimport researchIcon from '../../../../assets/icons/issue-type/research.svg';\nimport serviceRequestIcon from '../../../../assets/icons/issue-type/service-request.svg';\nimport storyIcon from '../../../../assets/icons/issue-type/story.svg';\nimport subbugIcon from '../../../../assets/icons/issue-type/subbug.svg';\nimport subtaskIcon from '../../../../assets/icons/issue-type/subtask.svg';\nimport taskIcon from '../../../../assets/icons/issue-type/task.svg';\nimport technicalDebtIcon from '../../../../assets/icons/issue-type/technical-debt.svg';\n\nimport './IssueTypeIcon.scss';\n\nexport type IssueTypeIconProps = Partial<Pick<IconRefugeProps, 'containerClassName' | 'title'>> & {\n    className?: string;\n    size?: number;\n    issueType?: IssueType;\n};\n\nconst getIconData = (issueType: string) => {\n    switch (issueType) {\n        case 'bug':\n            return bugIcon;\n        case 'design':\n            return designIcon;\n        case 'epic':\n            return epicIcon;\n        case 'improvement':\n            return improvementIcon;\n        case 'incident':\n            return incidentIcon;\n        case 'info':\n            return infoIcon;\n        case 'newFeature':\n            return newFeatureIcon;\n        case 'query':\n            return queryIcon;\n        case 'refactoring':\n            return refactoringIcon;\n        case 'release':\n            return releaseIcon;\n        case 'research':\n            return researchIcon;\n        case 'serviceRequest':\n            return serviceRequestIcon;\n        case 'story':\n            return storyIcon;\n        case 'subBug':\n            return subbugIcon;\n        case 'subTask':\n            return subtaskIcon;\n        case 'technicalDebt':\n            return technicalDebtIcon;\n        case 'milestone':\n            return milestoneIcon;\n\n        default:\n            return taskIcon;\n    }\n};\n\nexport const IssueTypeIcon: FC<IssueTypeIconProps> = ({\n    className,\n    containerClassName,\n    issueType = 'task',\n    size = 16,\n    title,\n}) => {\n    const config = getConfig();\n    const {t} = useLocalizedString(defaultMessages, config.lang);\n    const ariaLabel = title && t('type-label', {type: title});\n\n    return (\n        <IconRefuge\n            className={cnIcon({issueType}, [cnIssueTypeIcon({type: issueType}, className)])}\n            containerClassName={containerClassName}\n            data={getIconData(issueType)}\n            refugeSize={size}\n            aria-label={ariaLabel}\n        />\n    );\n};\n\nIssueTypeIcon.displayName = cnIcon();\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","getConfig","useLocalizedString","IconRefuge","cnIssueTypeIcon","defaultMessages","bugIcon","designIcon","epicIcon","improvementIcon","incidentIcon","infoIcon","milestoneIcon","newFeatureIcon","queryIcon","refactoringIcon","releaseIcon","researchIcon","serviceRequestIcon","storyIcon","subbugIcon","subtaskIcon","taskIcon","technicalDebtIcon","jsx","_jsx","ISSUE_TYPE_ICONS","bug","design","epic","improvement","incident","info","milestone","newFeature","query","refactoring","release","research","serviceRequest","story","subBug","subTask","task","technicalDebt","IssueTypeIcon","_ref","_ISSUE_TYPE_ICONS$iss","className","containerClassName","_ref$issueType","issueType","_ref$size","size","title","config","_useLocalizedString","lang","t","ariaLabel","type","undefined","data","refugeSize","displayName"],"sources":["IssueTypeIcon.tsx"],"sourcesContent":["import type {FC} from 'react';\nimport React from 'react';\n\nimport {type IconData, getConfig} from '@gravity-ui/uikit';\n\nimport {useLocalizedString} from '~/src/hooks/useLocalizedString';\n\nimport type {IconRefugeProps} from '../IconRefuge';\nimport {IconRefuge} from '../IconRefuge';\n\nimport {cnIssueTypeIcon} from './IssueTypeIcon.classname';\nimport {defaultMessages} from './i18n';\nimport type {IssueType} from './types';\n\nimport bugIcon from '../../../../assets/icons/issue-type/bug.svg';\nimport designIcon from '../../../../assets/icons/issue-type/design.svg';\nimport epicIcon from '../../../../assets/icons/issue-type/epic.svg';\nimport improvementIcon from '../../../../assets/icons/issue-type/improvement.svg';\nimport incidentIcon from '../../../../assets/icons/issue-type/incident.svg';\nimport infoIcon from '../../../../assets/icons/issue-type/info.svg';\nimport milestoneIcon from '../../../../assets/icons/issue-type/milestone.svg';\nimport newFeatureIcon from '../../../../assets/icons/issue-type/new-feature.svg';\nimport queryIcon from '../../../../assets/icons/issue-type/query.svg';\nimport refactoringIcon from '../../../../assets/icons/issue-type/refactoring.svg';\nimport releaseIcon from '../../../../assets/icons/issue-type/release.svg';\nimport researchIcon from '../../../../assets/icons/issue-type/research.svg';\nimport serviceRequestIcon from '../../../../assets/icons/issue-type/service-request.svg';\nimport storyIcon from '../../../../assets/icons/issue-type/story.svg';\nimport subbugIcon from '../../../../assets/icons/issue-type/subbug.svg';\nimport subtaskIcon from '../../../../assets/icons/issue-type/subtask.svg';\nimport taskIcon from '../../../../assets/icons/issue-type/task.svg';\nimport technicalDebtIcon from '../../../../assets/icons/issue-type/technical-debt.svg';\n\nimport './IssueTypeIcon.scss';\n\nexport type IssueTypeIconProps = Partial<Pick<IconRefugeProps, 'containerClassName' | 'title'>> & {\n    className?: string;\n    size?: number;\n    issueType?: IssueType;\n};\n\nconst ISSUE_TYPE_ICONS: Record<IssueType, IconData> = {\n    bug: bugIcon,\n    design: designIcon,\n    epic: epicIcon,\n    improvement: improvementIcon,\n    incident: incidentIcon,\n    info: infoIcon,\n    milestone: milestoneIcon,\n    newFeature: newFeatureIcon,\n    query: queryIcon,\n    refactoring: refactoringIcon,\n    release: releaseIcon,\n    research: researchIcon,\n    serviceRequest: serviceRequestIcon,\n    story: storyIcon,\n    subBug: subbugIcon,\n    subTask: subtaskIcon,\n    task: taskIcon,\n    technicalDebt: technicalDebtIcon,\n};\n\nexport const IssueTypeIcon: FC<IssueTypeIconProps> = ({\n    className,\n    containerClassName,\n    issueType = 'task',\n    size = 16,\n    title,\n}) => {\n    const config = getConfig();\n    const {t} = useLocalizedString(defaultMessages, config.lang);\n    const ariaLabel = title ? t('type-label', {type: issueType}) : undefined;\n\n    return (\n        <IconRefuge\n            className={cnIssueTypeIcon({type: issueType}, className)}\n            containerClassName={containerClassName}\n            data={ISSUE_TYPE_ICONS[issueType] ?? taskIcon}\n            refugeSize={size}\n            title={title}\n            aria-label={ariaLabel}\n            aria-hidden={!title || undefined}\n        />\n    );\n};\n\nIssueTypeIcon.displayName = 'IssueTypeIcon';\n"],"mappings":"AACA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAAuBC,SAAS,QAAO,mBAAmB;AAE1D,SAAQC,kBAAkB;AAG1B,SAAQC,UAAU;AAElB,SAAQC,eAAe;AACvB,SAAQC,eAAe;AAGvB,OAAOC,OAAO;AACd,OAAOC,UAAU;AACjB,OAAOC,QAAQ;AACf,OAAOC,eAAe;AACtB,OAAOC,YAAY;AACnB,OAAOC,QAAQ;AACf,OAAOC,aAAa;AACpB,OAAOC,cAAc;AACrB,OAAOC,SAAS;AAChB,OAAOC,eAAe;AACtB,OAAOC,WAAW;AAClB,OAAOC,YAAY;AACnB,OAAOC,kBAAkB;AACzB,OAAOC,SAAS;AAChB,OAAOC,UAAU;AACjB,OAAOC,WAAW;AAClB,OAAOC,QAAQ;AACf,OAAOC,iBAAiB;AAExB;AAA8B,SAAAC,GAAA,IAAAC,IAAA;AAQ9B,IAAMC,gBAA6C,GAAG;EAClDC,GAAG,EAAErB,OAAO;EACZsB,MAAM,EAAErB,UAAU;EAClBsB,IAAI,EAAErB,QAAQ;EACdsB,WAAW,EAAErB,eAAe;EAC5BsB,QAAQ,EAAErB,YAAY;EACtBsB,IAAI,EAAErB,QAAQ;EACdsB,SAAS,EAAErB,aAAa;EACxBsB,UAAU,EAAErB,cAAc;EAC1BsB,KAAK,EAAErB,SAAS;EAChBsB,WAAW,EAAErB,eAAe;EAC5BsB,OAAO,EAAErB,WAAW;EACpBsB,QAAQ,EAAErB,YAAY;EACtBsB,cAAc,EAAErB,kBAAkB;EAClCsB,KAAK,EAAErB,SAAS;EAChBsB,MAAM,EAAErB,UAAU;EAClBsB,OAAO,EAAErB,WAAW;EACpBsB,IAAI,EAAErB,QAAQ;EACdsB,aAAa,EAAErB;AACnB,CAAC;AAED,OAAO,IAAMsB,aAAqC,GAAG,SAAxCA,aAAqCA,CAAAC,IAAA,EAM5C;EAAA,IAAAC,qBAAA;EAAA,IALFC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,kBAAkB,GAAAH,IAAA,CAAlBG,kBAAkB;IAAAC,cAAA,GAAAJ,IAAA,CAClBK,SAAS;IAATA,SAAS,GAAAD,cAAA,cAAG,MAAM,GAAAA,cAAA;IAAAE,SAAA,GAAAN,IAAA,CAClBO,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,EAAE,GAAAA,SAAA;IACTE,KAAK,GAAAR,IAAA,CAALQ,KAAK;EAEL,IAAMC,MAAM,GAAGtD,SAAS,CAAC,CAAC;EAC1B,IAAAuD,mBAAA,GAAYtD,kBAAkB,CAACG,eAAe,EAAEkD,MAAM,CAACE,IAAI,CAAC;IAArDC,CAAC,GAAAF,mBAAA,CAADE,CAAC;EACR,IAAMC,SAAS,GAAGL,KAAK,GAAGI,CAAC,CAAC,YAAY,EAAE;IAACE,IAAI,EAAET;EAAS,CAAC,CAAC,GAAGU,SAAS;EAExE,oBACIpC,IAAA,CAACtB,UAAU;IACP6C,SAAS,EAAE5C,eAAe,CAAC;MAACwD,IAAI,EAAET;IAAS,CAAC,EAAEH,SAAS,CAAE;IACzDC,kBAAkB,EAAEA,kBAAmB;IACvCa,IAAI,GAAAf,qBAAA,GAAErB,gBAAgB,CAACyB,SAAS,CAAC,cAAAJ,qBAAA,cAAAA,qBAAA,GAAIzB,QAAS;IAC9CyC,UAAU,EAAEV,IAAK;IACjBC,KAAK,EAAEA,KAAM;IACb,cAAYK,SAAU;IACtB,eAAa,CAACL,KAAK,IAAIO;EAAU,CACpC,CAAC;AAEV,CAAC;AAEDhB,aAAa,CAACmB,WAAW,GAAG,eAAe","ignoreList":[]}

package/build/esm/components/Icon/IssueTypeIcon/README.md

@@ -1,40 +1,164 @@
 # IssueTypeIcon
 
 <!-- description:start -->
-Component displaying icons for the various issue types
+Displays the icon for a Tracker issue type (task, bug, epic, improvement, etc.). Each issue type maps to a distinct SVG asset. Unknown type keys fall back to a generic icon.
 <!-- description:end -->
 
+## Usage
+
+```tsx
+import {IssueTypeIcon} from '@weavix/tracker-components';
+
+<IssueTypeIcon issueType="bug" />
+```
+
 ## Component props
 
 <!-- props:start -->
 ```ts
 {
     /**
-     * Additional class
+     * Issue type key. Known values are listed below; any other string is
+     * accepted and falls back to a generic icon.
+     */
+    issueType:
+        | 'task'
+        | 'bug'
+        | 'design'
+        | 'epic'
+        | 'improvement'
+        | 'incident'
+        | 'info'
+        | 'milestone'
+        | 'newFeature'
+        | 'query'
+        | 'refactoring'
+        | 'release'
+        | 'research'
+        | 'serviceRequest'
+        | 'story'
+        | 'subBug'
+        | 'subTask'
+        | 'technicalDebt'
+        | string;
+
+    /**
+     * Size of the icon in pixels.
+     * @default 16
+     */
+    size?: number;
+
+    /**
+     * Additional CSS class applied to the root element.
      */
     className?: string;
+
     /**
-     * Issue type key
+     * Additional CSS class applied to the outer container element.
      */
-    issueType:
-        'task' |
-        'bug' |
-        'design' |
-        'epic' |
-        'improvement' |
-        'incident' |
-        'info' |
-        'newFeature' |
-        'query' |
-        'refactoring' |
-        'release' |
-        'serviceRequest' |
-        'story' |
-        'subBug' |
-        'subTask' |
-        'technicalDebt' |
-        'milestone' |
-        string;
+    containerClassName?: string;
+
+    /**
+     * Human-readable display name for the issue type (e.g. `"Bug"`, `"Story"`).
+     * When provided, an accessible label `"Type: <issueType>"` is rendered for
+     * screen readers and `title` is forwarded to the icon container.
+     * When omitted, the icon is treated as decorative (`aria-hidden`).
+     */
+    title?: string;
 }
 ```
 <!-- props:end -->
+
+---
+
+## Examples
+
+### Single icon
+
+```tsx
+import {IssueTypeIcon} from '@weavix/tracker-components';
+
+<IssueTypeIcon issueType="task" />
+<IssueTypeIcon issueType="bug" />
+<IssueTypeIcon issueType="epic" />
+```
+
+### Custom size
+
+```tsx
+<IssueTypeIcon issueType="story" size={24} />
+<IssueTypeIcon issueType="story" size={32} />
+```
+
+### Alongside issue summary
+
+```tsx
+import {IssueTypeIcon} from '@weavix/tracker-components';
+
+export const IssueRow = ({issue}: {issue: {type: string; summary: string}}) => (
+    <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
+        <IssueTypeIcon issueType={issue.type} size={16} />
+        <span>{issue.summary}</span>
+    </div>
+);
+```
+
+### All known issue types
+
+```tsx
+import {IssueTypeIcon} from '@weavix/tracker-components';
+
+const ISSUE_TYPES = [
+    'task', 'bug', 'design', 'epic', 'improvement',
+    'incident', 'info', 'milestone', 'newFeature', 'query',
+    'refactoring', 'release', 'research', 'serviceRequest',
+    'story', 'subBug', 'subTask', 'technicalDebt',
+] as const;
+
+export const IssueTypeGallery = () => (
+    <div style={{display: 'flex', flexWrap: 'wrap', gap: 16}}>
+        {ISSUE_TYPES.map((type) => (
+            <div key={type} style={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4}}>
+                <IssueTypeIcon issueType={type} size={24} />
+                <span style={{fontSize: 11}}>{type}</span>
+            </div>
+        ))}
+    </div>
+);
+```
+
+### From Tracker API
+
+Requires the `"tracker:issuetypes:read"` permission in your plugin's `manifest.json`:
+
+```json
+{
+    "permissions": {
+        "data": ["tracker:issuetypes:read"]
+    }
+}
+```
+
+```tsx
+import {IssueTypeIcon} from '@weavix/tracker-components';
+
+const issueType = await trackerApi.v3.get['/issues/{id}/{field}']({
+    pathParams: {
+        id: 'ISSUEKEY-1',
+        field: 'type',
+    },
+});
+
+<IssueTypeIcon
+    issueType={issueType.data.key}
+    title={issueType.data.display}
+/>
+```
+
+---
+
+## Notes
+
+- The `issueType` value is matched case-sensitively against the known keys. Values returned by the Tracker API (e.g. `"newFeature"`, `"subTask"`) match directly without transformation.
+- Passing an unknown string does not throw — the component renders a generic fallback icon.
+- When `title` is omitted the icon is treated as decorative and gets `aria-hidden="true"`. Pass `title` (e.g. `type.display` from the API) to make the icon accessible.

package/build/esm/components/Icon/KeyResultIcon/README.md

@@ -0,0 +1,73 @@
+# KeyResultIcon
+
+<!-- description:start -->
+Displays the icon for a Tracker key result entity. Renders a fixed SVG asset wrapped in a sized container, with a built-in tooltip that shows the localized "Key result" label on hover.
+<!-- description:end -->
+
+## Usage
+
+```tsx
+import {KeyResultIcon} from '@weavix/tracker-components';
+
+<KeyResultIcon />
+```
+
+## Component props
+
+<!-- props:start -->
+```ts
+{
+    /**
+     * Size of the SVG icon inside the container in pixels.
+     * @default 16
+     */
+    size?: number;
+
+    /**
+     * Size of the icon container in pixels.
+     * @default 24
+     */
+    refugeSize?: number;
+}
+```
+<!-- props:end -->
+
+---
+
+## Examples
+
+### Default
+
+```tsx
+import {KeyResultIcon} from '@weavix/tracker-components';
+
+<KeyResultIcon />
+```
+
+### Custom size
+
+```tsx
+// Larger icon for a header row
+<KeyResultIcon size={20} refugeSize={32} />
+```
+
+### Alongside key result name
+
+```tsx
+import {KeyResultIcon} from '@weavix/tracker-components';
+
+export const KeyResultLabel = ({name}: {name: string}) => (
+    <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
+        <KeyResultIcon />
+        <span>{name}</span>
+    </div>
+);
+```
+
+---
+
+## Notes
+
+- The tooltip text is **automatically localized** using the Gravity UI `getConfig().lang` setting. No additional i18n setup is required.
+- Unlike [`GoalIcon`](../GoalIcon/README.md), [`ProjectIcon`](../ProjectIcon/README.md), and [`PortfolioIcon`](../PortfolioIcon/README.md), `KeyResultIcon` does **not** accept an entity ID — it always renders the same fixed asset.
+- To render the correct icon for an arbitrary meta entity type, use [`MetaEntityIcon`](../MetaEntityIcon/README.md) instead.

package/build/esm/components/Icon/MetaEntityIcon/README.md

@@ -0,0 +1,136 @@
+# MetaEntityIcon
+
+<!-- description:start -->
+A dispatcher component that renders the correct icon for any Tracker meta entity type — project, portfolio, goal, or key result. Pass the entity object and the component automatically selects and renders the appropriate icon with a deterministic color derived from the entity ID.
+<!-- description:end -->
+
+## Usage
+
+```tsx
+import {MetaEntityIcon} from '@weavix/tracker-components';
+
+<MetaEntityIcon entity={{entityType: 'project', id: 'proj-1', shortId: 42}} />
+```
+
+## Component props
+
+<!-- props:start -->
+```ts
+{
+    /**
+     * The meta entity to display an icon for.
+     * Only `entityType`, `id`, and `shortId` are required.
+     */
+    entity: {
+        entityType: 'project' | 'portfolio' | 'goal' | 'keyResult';
+        /** String entity ID (used for portfolio color generation). */
+        id: string;
+        /** Numeric short ID (used for project and goal color generation). */
+        shortId: number;
+    };
+
+    /**
+     * Size of the SVG icon inside the container in pixels.
+     * @default 20
+     */
+    size?: number;
+}
+```
+<!-- props:end -->
+
+---
+
+## Supported entity types
+
+| `entityType` | Rendered component | Color source |
+|---|---|---|
+| `'project'` | [`ProjectIcon`](../ProjectIcon/README.md) | `shortId` |
+| `'portfolio'` | [`PortfolioIcon`](../PortfolioIcon/README.md) | `id` |
+| `'goal'` | [`GoalIcon`](../GoalIcon/README.md) | `shortId` |
+| `'keyResult'` | [`KeyResultIcon`](../KeyResultIcon/README.md) | fixed asset, no color |
+| anything else | `null` (renders nothing) | — |
+
+---
+
+## Examples
+
+### All entity types
+
+```tsx
+import {MetaEntityIcon} from '@weavix/tracker-components';
+
+<MetaEntityIcon entity={{entityType: 'project',   id: 'proj-1',  shortId: 42}} />
+<MetaEntityIcon entity={{entityType: 'portfolio', id: 'port-1',  shortId: 7}}  />
+<MetaEntityIcon entity={{entityType: 'goal',      id: 'goal-1',  shortId: 99}} />
+```
+
+### Custom size
+
+```tsx
+// 32 px icon for a page header
+<MetaEntityIcon
+    entity={{entityType: 'project', id: 'proj-1', shortId: 42}}
+    size={32}
+/>
+```
+
+### Rendering from a Tracker API response
+
+Requires the `"tracker:entities:write"` permission in your plugin's `manifest.json`:
+
+```json
+{
+    "permissions": {
+        "data": ["tracker:entities:write"]
+    }
+}
+```
+
+`MetaEntityIcon` accepts the shape returned directly by the Tracker entities search endpoint, so you can pass `result.data[i]` without any mapping:
+
+```tsx
+import React, {useEffect, useState} from 'react';
+import {MetaEntityIcon} from '@weavix/tracker-components';
+import type {MetaEntityV2} from '@weavix/tracker-api-types';
+
+interface Props {
+    trackerApi: TrackerApi;
+}
+
+export const EntityList: React.FC<Props> = ({trackerApi}) => {
+    const [entities, setEntities] = useState<MetaEntityV2[]>([]);
+
+    useEffect(() => {
+        trackerApi.v3
+            .post['/entities/{entityType}/_search']({
+                pathParams: {entityType: 'project'},
+                queryParams: {fields: ['summary'], page: 1, perPage: 20},
+                bodyParams: {filter: {}, filterTypes: ['ALL'], input: ''},
+            })
+            .then((result) => setEntities(result.data));
+    }, [trackerApi]);
+
+    return (
+        <ul>
+            {entities.map((entity) => (
+                <li key={entity.id} style={{display: 'flex', alignItems: 'center', gap: 8}}>
+                    <MetaEntityIcon entity={entity} size={20} />
+                    <span>{entity.fields?.summary?.value ?? entity.id}</span>
+                </li>
+            ))}
+        </ul>
+    );
+};
+```
+
+### Used inside MetaEntitiesSelect
+
+`MetaEntityIcon` is used internally by [`MetaEntitiesSelect`](../../MetaEntitiesSelect/README.md) to render each item in the suggest list. You do not need to use it directly when using that component.
+
+---
+
+## Notes
+
+- The `entity` prop only requires `entityType`, `id`, and `shortId` — it is compatible with the full `MetaEntityV2` type from `@weavix/tracker-api-types`.
+- For unknown `entityType` values the component renders `null` silently.
+- To render individual entity icons directly, use [`ProjectIcon`](../ProjectIcon/README.md), [`PortfolioIcon`](../PortfolioIcon/README.md), [`GoalIcon`](../GoalIcon/README.md), or [`KeyResultIcon`](../KeyResultIcon/README.md).

package/build/esm/components/Icon/PortfolioIcon/PortfolioIcon.d.ts

@@ -3,4 +3,7 @@ import type { EntityIconProps } from '../EntityIcon';
 export type PortfolioIconProps = {
     portfolioId: string;
 } & Omit<EntityIconProps, 'data' | 'id' | 'alpha'>;
-export declare const PortfolioIcon: ({ portfolioId, ...props }: PortfolioIconProps) => React.JSX.Element;
+export declare const PortfolioIcon: {
+    ({ portfolioId, ...props }: PortfolioIconProps): React.JSX.Element;
+    displayName: string;
+};

package/build/esm/components/Icon/PortfolioIcon/PortfolioIcon.js

@@ -16,4 +16,5 @@ export var PortfolioIcon = function PortfolioIcon(_ref) {
     withBackground: false
   }, props));
 };
+PortfolioIcon.displayName = 'PortfolioIcon';
 // #sourceMappingURL=PortfolioIcon.js.map

package/build/esm/components/Icon/PortfolioIcon/PortfolioIcon.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","EntityIcon","portfolioIcon","jsx","_jsx","PortfolioIcon","_ref","portfolioId","props","_objectWithoutProperties","_excluded","_objectSpread","data","id","type","alpha","withBackground"],"sources":["PortfolioIcon.tsx"],"sourcesContent":["import React from 'react';\n\nimport type {EntityIconProps} from '../EntityIcon';\nimport {EntityIcon} from '../EntityIcon';\n\nimport portfolioIcon from '../../../../assets/icons/portfolio.svg';\n\nexport type PortfolioIconProps = {portfolioId: string} & Omit<\n    EntityIconProps,\n    'data' | 'id' | 'alpha'\n>;\n\nexport const PortfolioIcon = ({portfolioId, ...props}: PortfolioIconProps) => (\n    <EntityIcon\n        data={portfolioIcon}\n        id={portfolioId}\n        type=\"portfolio\"\n        alpha={0.5}\n        withBackground={false}\n        {...props}\n    />\n);\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAAQC,UAAU;AAElB,OAAOC,aAAa;AAA+C,SAAAC,GAAA,IAAAC,IAAA;AAOnE,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,IAAA;EAAA,IAAKC,WAAW,GAAAD,IAAA,CAAXC,WAAW;IAAKC,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,oBAChDN,IAAA,CAACH,UAAU,EAAAU,aAAA;IACPC,IAAI,EAAEV,aAAc;IACpBW,EAAE,EAAEN,WAAY;IAChBO,IAAI,EAAC,WAAW;IAChBC,KAAK,EAAE,GAAI;IACXC,cAAc,EAAE;EAAM,GAClBR,KAAK,CACZ,CAAC;AAAA,CACL","ignoreList":[]}
+{"version":3,"names":["React","EntityIcon","portfolioIcon","jsx","_jsx","PortfolioIcon","_ref","portfolioId","props","_objectWithoutProperties","_excluded","_objectSpread","data","id","type","alpha","withBackground","displayName"],"sources":["PortfolioIcon.tsx"],"sourcesContent":["import React from 'react';\n\nimport type {EntityIconProps} from '../EntityIcon';\nimport {EntityIcon} from '../EntityIcon';\n\nimport portfolioIcon from '../../../../assets/icons/portfolio.svg';\n\nexport type PortfolioIconProps = {portfolioId: string} & Omit<\n    EntityIconProps,\n    'data' | 'id' | 'alpha'\n>;\n\nexport const PortfolioIcon = ({portfolioId, ...props}: PortfolioIconProps) => (\n    <EntityIcon\n        data={portfolioIcon}\n        id={portfolioId}\n        type=\"portfolio\"\n        alpha={0.5}\n        withBackground={false}\n        {...props}\n    />\n);\n\nPortfolioIcon.displayName = 'PortfolioIcon';\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,SAAQC,UAAU;AAElB,OAAOC,aAAa;AAA+C,SAAAC,GAAA,IAAAC,IAAA;AAOnE,OAAO,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAAC,IAAA;EAAA,IAAKC,WAAW,GAAAD,IAAA,CAAXC,WAAW;IAAKC,KAAK,GAAAC,wBAAA,CAAAH,IAAA,EAAAI,SAAA;EAAA,oBAChDN,IAAA,CAACH,UAAU,EAAAU,aAAA;IACPC,IAAI,EAAEV,aAAc;IACpBW,EAAE,EAAEN,WAAY;IAChBO,IAAI,EAAC,WAAW;IAChBC,KAAK,EAAE,GAAI;IACXC,cAAc,EAAE;EAAM,GAClBR,KAAK,CACZ,CAAC;AAAA,CACL;AAEDH,aAAa,CAACY,WAAW,GAAG,eAAe","ignoreList":[]}