@weavix/tracker-components 0.1.0 → 0.1.2

package/build/cjs/components/Icon/ProjectIcon/README.md

@@ -1,51 +1,175 @@
 # ProjectIcon
 
 <!-- description:start -->
-Component displaying an icon for a project entity
+Displays a colored icon for a Tracker project entity. The icon color is deterministically derived from the `projectId`, so the same project always renders the same color across sessions and environments.
 <!-- description:end -->
 
+## Usage
+
+```tsx
+import {ProjectIcon} from '@weavix/tracker-components';
+
+<ProjectIcon projectId={123} />
+```
+
 ## Component props
 
 <!-- props:start -->
 ```ts
 {
     /**
-     * Project ID used to generate a deterministic color
+     * Project ID used to generate a deterministic color.
+     * Accepts either the numeric shortId or a string entity ID.
      */
     projectId?: number | string;
+
     /**
-     * Additional class
+     * Additional CSS class applied to the root element.
      */
     className?: string;
+
     /**
-     * Entity type label (defaults to "project")
+     * Entity type label. Defaults to "project".
      */
     type?: string;
+
     /**
-     * Size of the SVG icon inside the container in pixels
+     * Size of the SVG icon inside the container in pixels.
      * @default 16
      */
     size?: number;
+
     /**
-     * Size of the icon container in pixels
+     * Size of the icon container (the colored square) in pixels.
      * @default 24
      */
     refugeSize?: number;
+
     /**
-     * Whether to render a colored background behind the icon
+     * Whether to render a colored background behind the icon.
      * @default true
      */
     withBackground?: boolean;
+
     /**
-     * Border radius variant of the icon container
+     * Border radius variant of the icon container.
      * @default 'm'
      */
     radius?: 'm' | 'l';
+
     /**
-     * Alpha (opacity) of the icon color
+     * Alpha (opacity) of the icon foreground color.
      * @default 1
      */
     colorAlpha?: number;
 }
 ```
 <!-- props:end -->
+
+---
+
+## Examples
+
+### Default
+
+```tsx
+import {ProjectIcon} from '@weavix/tracker-components';
+
+<ProjectIcon projectId={123} />
+```
+
+### Without background
+
+```tsx
+// Renders only the colored SVG, no background square
+<ProjectIcon projectId={123} withBackground={false} />
+```
+
+### Custom size
+
+```tsx
+<ProjectIcon projectId={123} size={20} refugeSize={32} />
+```
+
+### Large radius
+
+```tsx
+<ProjectIcon projectId={123} radius="l" />
+```
+
+### Alongside project name
+
+```tsx
+import {ProjectIcon} from '@weavix/tracker-components';
+
+export const ProjectLabel = ({project}: {project: {shortId: number; name: string}}) => (
+    <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
+        <ProjectIcon projectId={project.shortId} />
+        <span>{project.name}</span>
+    </div>
+);
+```
+
+### Multiple projects (each gets a unique color)
+
+```tsx
+const projects = [
+    {shortId: 1, name: 'Backend API'},
+    {shortId: 2, name: 'Mobile App'},
+    {shortId: 3, name: 'Design System'},
+];
+
+projects.map((p) => (
+    <div key={p.shortId} style={{display: 'flex', alignItems: 'center', gap: 8}}>
+        <ProjectIcon projectId={p.shortId} />
+        <span>{p.name}</span>
+    </div>
+));
+```
+
+### Rendering from a Tracker API response
+
+The Tracker entities search endpoint returns `shortId` as a number — pass it directly:
+
+```tsx
+import React, {useEffect, useState} from 'react';
+import {ProjectIcon} from '@weavix/tracker-components';
+import type {MetaEntityV2} from '@weavix/tracker-api-types';
+
+interface Props {
+    trackerApi: TrackerApi;
+}
+
+export const ProjectList: React.FC<Props> = ({trackerApi}) => {
+    const [projects, setProjects] = 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) => setProjects(result.data));
+    }, [trackerApi]);
+
+    return (
+        <ul>
+            {projects.map((project) => (
+                <li key={project.id} style={{display: 'flex', alignItems: 'center', gap: 8}}>
+                    <ProjectIcon projectId={project.shortId} />
+                    <span>{project.fields?.summary?.value ?? project.id}</span>
+                </li>
+            ))}
+        </ul>
+    );
+};
+```
+
+---
+
+## Notes
+
+- `withBackground` defaults to `true` for projects (vs `false` for [`PortfolioIcon`](../PortfolioIcon/README.md)).
+- Pass `projectId` as the **numeric `shortId`** from the Tracker API for consistent color generation. String IDs are also accepted.
+- To render the correct icon for an arbitrary meta entity type, use [`MetaEntityIcon`](../MetaEntityIcon/README.md) instead.

package/build/cjs/components/MetaEntitiesSelect/README.md

@@ -100,6 +100,16 @@ type MetaEntityV2 = {
 
 `MetaEntitiesSelect` is data-agnostic — it accepts items via the `getItems` prop. You are responsible for fetching data from the Tracker API and passing it to the component.
 
+Requires the `"tracker:entities:write"` permission in your plugin's `manifest.json`:
+
+```json
+{
+    "permissions": {
+        "data": ["tracker:entities:write"]
+    }
+}
+```
+
 ### Getting projects
 
 Use the entities search endpoint to fetch projects (or other entity types):

package/build/cjs/components/PluginFieldsSelect/README.md

@@ -235,6 +235,24 @@ type TrackerSelectItem = {
 
 `PluginFieldsSelect` is data-agnostic — it accepts fields via the `fields` prop. You are responsible for fetching data from the Tracker API and passing it to the component.
 
+Add the required permissions to your plugin's `manifest.json`:
+
+```json
+{
+    "permissions": {
+        "data": [
+            "tracker:fields:read",
+            "tracker:fields:write",
+            "tracker:queues:read"
+        ]
+    }
+}
+```
+
+- `tracker:fields:read` — required for `GET /fields` and `POST /fields/_suggest`
+- `tracker:fields:write` — required if your plugin writes field values back to Tracker
+- `tracker:queues:read` — required when using `localFields: true` with queue keys (Flow 3)
+
 There are three fetch flows depending on whether the user has typed anything and whether local (queue-specific) fields are needed.
 
 ### Flow 1 — Initial load (no user input)

package/build/cjs/components/QueueSelect/README.md

@@ -178,6 +178,16 @@ type QueueSuggestItem = {
 
 `QueueSelect` is data-agnostic — it accepts queues via the `queues` prop and search results via the `onSearch` callback. You are responsible for fetching data from the Tracker API and passing it to the component.
 
+Requires the `"tracker:queues:read"` permission in your plugin's `manifest.json`:
+
+```json
+{
+    "permissions": {
+        "data": ["tracker:queues:read"]
+    }
+}
+```
+
 There are two fetch flows depending on whether the user has typed anything in the search filter.
 
 ### Flow 1 — Initial load (no user input)

package/build/cjs/components/TrackerDisclosure/README.md

@@ -0,0 +1,205 @@
+# TrackerDisclosure
+
+<!-- description:start -->
+A collapsible section component with Tracker-specific styling. Extends Gravity UI [`Disclosure`](https://gravity-ui.com/components/disclosure) with a configurable chevron arrow (position and size), an optional toolbar slot rendered alongside the summary, and BEM class name hooks for fine-grained styling.
+<!-- description:end -->
+
+## Usage
+
+```tsx
+import {TrackerDisclosure} from '@weavix/tracker-components';
+
+<TrackerDisclosure summary="Section title" defaultExpanded>
+    Content goes here
+</TrackerDisclosure>
+```
+
+## Component props
+
+<!-- props:start -->
+```ts
+{
+    /**
+     * Content shown in the clickable summary / header row.
+     * Accepts a string or any ReactNode.
+     */
+    summary?: ReactNode;
+
+    /**
+     * Content rendered inside the collapsible body.
+     */
+    children?: ReactNode;
+
+    /**
+     * Whether the section is expanded on first render (uncontrolled).
+     * @default false
+     */
+    defaultExpanded?: boolean;
+
+    /**
+     * Controlled expanded state. When provided, you must also handle onUpdate.
+     */
+    expanded?: boolean;
+
+    /**
+     * Callback fired when the expanded state changes.
+     */
+    onUpdate?: (expanded: boolean) => void;
+
+    /**
+     * Whether the disclosure is disabled (non-interactive).
+     * @default false
+     */
+    disabled?: boolean;
+
+    /**
+     * Position of the chevron arrow relative to the summary text.
+     * @default 'end'
+     */
+    arrowPosition?: 'start' | 'end';
+
+    /**
+     * Size of the chevron arrow icon in pixels.
+     * @default 20
+     */
+    arrowSize?: number;
+
+    /**
+     * Optional ReactNode rendered to the right of the toggle button inside the
+     * summary row. Useful for action buttons (edit, delete, add, …).
+     */
+    toolbar?: ReactNode;
+
+    /**
+     * Additional CSS class applied to the root element.
+     */
+    className?: string;
+
+    /**
+     * Additional CSS class applied to the summary row wrapper.
+     */
+    summaryClassName?: string;
+
+    /**
+     * Additional CSS class applied to the toggle `<button>` element.
+     */
+    toggleClassName?: string;
+
+    /**
+     * Additional CSS class applied to the chevron arrow icon.
+     */
+    arrowClassName?: string;
+}
+```
+<!-- props:end -->
+
+> **Note:** `TrackerDisclosure` accepts all props from Gravity UI [`DisclosureProps`](https://gravity-ui.com/components/disclosure) in addition to the Tracker-specific ones listed above.
+
+---
+
+## Examples
+
+### Basic (uncontrolled)
+
+```tsx
+import {TrackerDisclosure} from '@weavix/tracker-components';
+
+<TrackerDisclosure summary="Sprint details" defaultExpanded>
+    <p>Sprint 42 — 14 issues, 3 in progress.</p>
+</TrackerDisclosure>
+```
+
+---
+
+### Controlled
+
+```tsx
+import React, {useState} from 'react';
+import {TrackerDisclosure} from '@weavix/tracker-components';
+
+export const ControlledExample = () => {
+    const [expanded, setExpanded] = useState(false);
+
+    return (
+        <TrackerDisclosure
+            summary="Filters"
+            expanded={expanded}
+            onUpdate={setExpanded}
+        >
+            <p>Filter content here.</p>
+        </TrackerDisclosure>
+    );
+};
+```
+
+---
+
+### Arrow at start
+
+```tsx
+<TrackerDisclosure summary="Description" arrowPosition="start">
+    <p>Content with the chevron on the left.</p>
+</TrackerDisclosure>
+```
+
+---
+
+### With toolbar
+
+The `toolbar` prop renders additional content (e.g. action buttons) to the right of the toggle button, inside the summary row but outside the toggle click area.
+
+```tsx
+import {Button} from '@gravity-ui/uikit';
+import {TrackerDisclosure} from '@weavix/tracker-components';
+
+<TrackerDisclosure
+    summary="Attachments"
+    toolbar={
+        <Button size="s" view="flat" onClick={() => openUploadDialog()}>
+            Add file
+        </Button>
+    }
+>
+    <AttachmentList />
+</TrackerDisclosure>
+```
+
+---
+
+### Disabled
+
+```tsx
+<TrackerDisclosure summary="Locked section" disabled defaultExpanded>
+    <p>This section cannot be collapsed by the user.</p>
+</TrackerDisclosure>
+```
+
+---
+
+### Multiple sections (accordion-like)
+
+```tsx
+import React, {useState} from 'react';
+import {TrackerDisclosure} from '@weavix/tracker-components';
+
+const SECTIONS = ['Details', 'Attachments', 'Comments'];
+
+export const AccordionExample = () => {
+    const [openIndex, setOpenIndex] = useState<number | null>(0);
+
+    return (
+        <>
+            {SECTIONS.map((title, i) => (
+                <TrackerDisclosure
+                    key={title}
+                    summary={title}
+                    expanded={openIndex === i}
+                    onUpdate={(open) => setOpenIndex(open ? i : null)}
+                >
+                    <p>Content for {title}</p>
+                </TrackerDisclosure>
+            ))}
+        </>
+    );
+};
+```

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

@@ -8,8 +8,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export var EntityIcon = /*#__PURE__*/memo(function (_ref) {
   var data = _ref.data,
     className = _ref.className,
-    _ref$id = _ref.id,
-    id = _ref$id === void 0 ? ' ' : _ref$id,
+    id = _ref.id,
     type = _ref.type,
     _ref$refugeSize = _ref.refugeSize,
     refugeSize = _ref$refugeSize === void 0 ? 24 : _ref$refugeSize,
@@ -25,7 +24,7 @@ export var EntityIcon = /*#__PURE__*/memo(function (_ref) {
     colorAlpha = _ref$colorAlpha === void 0 ? 1 : _ref$colorAlpha;
   var theme = useThemeType();
   var randomColor = useColorGenerator({
-    seed: String(id),
+    seed: id !== undefined ? String(id) : ' ',
     theme: theme
   });
   var color = "rgba(".concat(randomColor.rgb.r, ",").concat(randomColor.rgb.g, ",").concat(randomColor.rgb.b, ",").concat(colorAlpha, ")");

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

@@ -1 +1 @@
-{"version":3,"names":["React","memo","useColorGenerator","useThemeType","IconRefuge","cnEntityIcon","jsx","_jsx","EntityIcon","_ref","data","className","_ref$id","id","type","_ref$refugeSize","refugeSize","_ref$size","size","_ref$alpha","alpha","_ref$withBackground","withBackground","_ref$radius","radius","_ref$colorAlpha","colorAlpha","theme","randomColor","seed","String","color","concat","rgb","r","g","b","backgroundColor","containerStyle","background","containerClassName","displayName"],"sources":["EntityIcon.tsx"],"sourcesContent":["import type {FC} from 'react';\nimport React, {memo} from 'react';\n\nimport {type IconData, useColorGenerator, useThemeType} from '@gravity-ui/uikit';\n\nimport {IconRefuge} from '../IconRefuge';\n\nimport {cnEntityIcon} from './EntityIcon.classname';\n\nimport './EntityIcon.scss';\n\nexport type EntityIconProps = {\n    data: IconData;\n    className?: string;\n    id?: number | string;\n    type?: string;\n    refugeSize?: number;\n    size?: number;\n    alpha?: number;\n    withBackground?: boolean;\n    radius?: 'm' | 'l';\n    colorAlpha?: number;\n};\n\nexport const EntityIcon: FC<EntityIconProps> = memo(\n    ({\n        data,\n        className,\n        id = ' ',\n        type,\n        refugeSize = 24,\n        size = 16,\n        alpha = 0.15,\n        withBackground = true,\n        radius = 'm',\n        colorAlpha = 1,\n    }) => {\n        const theme = useThemeType();\n\n        const randomColor = useColorGenerator({seed: String(id), theme});\n\n        const color = `rgba(${randomColor.rgb.r},${randomColor.rgb.g},${randomColor.rgb.b},${colorAlpha})`;\n        const backgroundColor = `rgba(${randomColor.rgb.r},${randomColor.rgb.g},${randomColor.rgb.b},${alpha})`;\n\n        const containerStyle: {\n            background?: string;\n            color?: string;\n        } = {};\n\n        if (withBackground) {\n            containerStyle.background = backgroundColor;\n            containerStyle.color = color;\n        } else {\n            containerStyle.color = backgroundColor;\n        }\n\n        return (\n            <IconRefuge\n                data={data}\n                containerClassName={cnEntityIcon({type, radius}, className)}\n                refugeSize={refugeSize}\n                size={size}\n                containerStyle={containerStyle}\n            />\n        );\n    },\n);\n\nEntityIcon.displayName = 'EntityIcon';\n"],"mappings":";AACA,OAAOA,KAAK,IAAGC,IAAI,QAAO,OAAO;AAEjC,SAAuBC,iBAAiB,EAAEC,YAAY,QAAO,mBAAmB;AAEhF,SAAQC,UAAU;AAElB,SAAQC,YAAY;AAEpB;AAA2B,SAAAC,GAAA,IAAAC,IAAA;AAe3B,OAAO,IAAMC,UAA+B,gBAAGP,IAAI,CAC/C,UAAAQ,IAAA,EAWM;EAAA,IAVFC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACJC,SAAS,GAAAF,IAAA,CAATE,SAAS;IAAAC,OAAA,GAAAH,IAAA,CACTI,EAAE;IAAFA,EAAE,GAAAD,OAAA,cAAG,GAAG,GAAAA,OAAA;IACRE,IAAI,GAAAL,IAAA,CAAJK,IAAI;IAAAC,eAAA,GAAAN,IAAA,CACJO,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,EAAE,GAAAA,eAAA;IAAAE,SAAA,GAAAR,IAAA,CACfS,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,EAAE,GAAAA,SAAA;IAAAE,UAAA,GAAAV,IAAA,CACTW,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,IAAI,GAAAA,UAAA;IAAAE,mBAAA,GAAAZ,IAAA,CACZa,cAAc;IAAdA,cAAc,GAAAD,mBAAA,cAAG,IAAI,GAAAA,mBAAA;IAAAE,WAAA,GAAAd,IAAA,CACrBe,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,GAAG,GAAAA,WAAA;IAAAE,eAAA,GAAAhB,IAAA,CACZiB,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,CAAC,GAAAA,eAAA;EAEd,IAAME,KAAK,GAAGxB,YAAY,CAAC,CAAC;EAE5B,IAAMyB,WAAW,GAAG1B,iBAAiB,CAAC;IAAC2B,IAAI,EAAEC,MAAM,CAACjB,EAAE,CAAC;IAAEc,KAAK,EAALA;EAAK,CAAC,CAAC;EAEhE,IAAMI,KAAK,WAAAC,MAAA,CAAWJ,WAAW,CAACK,GAAG,CAACC,CAAC,OAAAF,MAAA,CAAIJ,WAAW,CAACK,GAAG,CAACE,CAAC,OAAAH,MAAA,CAAIJ,WAAW,CAACK,GAAG,CAACG,CAAC,OAAAJ,MAAA,CAAIN,UAAU,MAAG;EAClG,IAAMW,eAAe,WAAAL,MAAA,CAAWJ,WAAW,CAACK,GAAG,CAACC,CAAC,OAAAF,MAAA,CAAIJ,WAAW,CAACK,GAAG,CAACE,CAAC,OAAAH,MAAA,CAAIJ,WAAW,CAACK,GAAG,CAACG,CAAC,OAAAJ,MAAA,CAAIZ,KAAK,MAAG;EAEvG,IAAMkB,cAGL,GAAG,CAAC,CAAC;EAEN,IAAIhB,cAAc,EAAE;IAChBgB,cAAc,CAACC,UAAU,GAAGF,eAAe;IAC3CC,cAAc,CAACP,KAAK,GAAGA,KAAK;EAChC,CAAC,MAAM;IACHO,cAAc,CAACP,KAAK,GAAGM,eAAe;EAC1C;EAEA,oBACI9B,IAAA,CAACH,UAAU;IACPM,IAAI,EAAEA,IAAK;IACX8B,kBAAkB,EAAEnC,YAAY,CAAC;MAACS,IAAI,EAAJA,IAAI;MAAEU,MAAM,EAANA;IAAM,CAAC,EAAEb,SAAS,CAAE;IAC5DK,UAAU,EAAEA,UAAW;IACvBE,IAAI,EAAEA,IAAK;IACXoB,cAAc,EAAEA;EAAe,CAClC,CAAC;AAEV,CACJ,CAAC;AAED9B,UAAU,CAACiC,WAAW,GAAG,YAAY","ignoreList":[]}
+{"version":3,"names":["React","memo","useColorGenerator","useThemeType","IconRefuge","cnEntityIcon","jsx","_jsx","EntityIcon","_ref","data","className","id","type","_ref$refugeSize","refugeSize","_ref$size","size","_ref$alpha","alpha","_ref$withBackground","withBackground","_ref$radius","radius","_ref$colorAlpha","colorAlpha","theme","randomColor","seed","undefined","String","color","concat","rgb","r","g","b","backgroundColor","containerStyle","background","containerClassName","displayName"],"sources":["EntityIcon.tsx"],"sourcesContent":["import type {FC} from 'react';\nimport React, {memo} from 'react';\n\nimport {type IconData, useColorGenerator, useThemeType} from '@gravity-ui/uikit';\n\nimport {IconRefuge} from '../IconRefuge';\n\nimport {cnEntityIcon} from './EntityIcon.classname';\n\nimport './EntityIcon.scss';\n\nexport type EntityIconProps = {\n    data: IconData;\n    className?: string;\n    id?: number | string;\n    type?: string;\n    refugeSize?: number;\n    size?: number;\n    alpha?: number;\n    withBackground?: boolean;\n    radius?: 'm' | 'l';\n    colorAlpha?: number;\n};\n\nexport const EntityIcon: FC<EntityIconProps> = memo(\n    ({\n        data,\n        className,\n        id,\n        type,\n        refugeSize = 24,\n        size = 16,\n        alpha = 0.15,\n        withBackground = true,\n        radius = 'm',\n        colorAlpha = 1,\n    }) => {\n        const theme = useThemeType();\n\n        const randomColor = useColorGenerator({seed: id !== undefined ? String(id) : ' ', theme});\n\n        const color = `rgba(${randomColor.rgb.r},${randomColor.rgb.g},${randomColor.rgb.b},${colorAlpha})`;\n        const backgroundColor = `rgba(${randomColor.rgb.r},${randomColor.rgb.g},${randomColor.rgb.b},${alpha})`;\n\n        const containerStyle: {\n            background?: string;\n            color?: string;\n        } = {};\n\n        if (withBackground) {\n            containerStyle.background = backgroundColor;\n            containerStyle.color = color;\n        } else {\n            containerStyle.color = backgroundColor;\n        }\n\n        return (\n            <IconRefuge\n                data={data}\n                containerClassName={cnEntityIcon({type, radius}, className)}\n                refugeSize={refugeSize}\n                size={size}\n                containerStyle={containerStyle}\n            />\n        );\n    },\n);\n\nEntityIcon.displayName = 'EntityIcon';\n"],"mappings":";AACA,OAAOA,KAAK,IAAGC,IAAI,QAAO,OAAO;AAEjC,SAAuBC,iBAAiB,EAAEC,YAAY,QAAO,mBAAmB;AAEhF,SAAQC,UAAU;AAElB,SAAQC,YAAY;AAEpB;AAA2B,SAAAC,GAAA,IAAAC,IAAA;AAe3B,OAAO,IAAMC,UAA+B,gBAAGP,IAAI,CAC/C,UAAAQ,IAAA,EAWM;EAAA,IAVFC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACJC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,EAAE,GAAAH,IAAA,CAAFG,EAAE;IACFC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;IAAAC,eAAA,GAAAL,IAAA,CACJM,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,EAAE,GAAAA,eAAA;IAAAE,SAAA,GAAAP,IAAA,CACfQ,IAAI;IAAJA,IAAI,GAAAD,SAAA,cAAG,EAAE,GAAAA,SAAA;IAAAE,UAAA,GAAAT,IAAA,CACTU,KAAK;IAALA,KAAK,GAAAD,UAAA,cAAG,IAAI,GAAAA,UAAA;IAAAE,mBAAA,GAAAX,IAAA,CACZY,cAAc;IAAdA,cAAc,GAAAD,mBAAA,cAAG,IAAI,GAAAA,mBAAA;IAAAE,WAAA,GAAAb,IAAA,CACrBc,MAAM;IAANA,MAAM,GAAAD,WAAA,cAAG,GAAG,GAAAA,WAAA;IAAAE,eAAA,GAAAf,IAAA,CACZgB,UAAU;IAAVA,UAAU,GAAAD,eAAA,cAAG,CAAC,GAAAA,eAAA;EAEd,IAAME,KAAK,GAAGvB,YAAY,CAAC,CAAC;EAE5B,IAAMwB,WAAW,GAAGzB,iBAAiB,CAAC;IAAC0B,IAAI,EAAEhB,EAAE,KAAKiB,SAAS,GAAGC,MAAM,CAAClB,EAAE,CAAC,GAAG,GAAG;IAAEc,KAAK,EAALA;EAAK,CAAC,CAAC;EAEzF,IAAMK,KAAK,WAAAC,MAAA,CAAWL,WAAW,CAACM,GAAG,CAACC,CAAC,OAAAF,MAAA,CAAIL,WAAW,CAACM,GAAG,CAACE,CAAC,OAAAH,MAAA,CAAIL,WAAW,CAACM,GAAG,CAACG,CAAC,OAAAJ,MAAA,CAAIP,UAAU,MAAG;EAClG,IAAMY,eAAe,WAAAL,MAAA,CAAWL,WAAW,CAACM,GAAG,CAACC,CAAC,OAAAF,MAAA,CAAIL,WAAW,CAACM,GAAG,CAACE,CAAC,OAAAH,MAAA,CAAIL,WAAW,CAACM,GAAG,CAACG,CAAC,OAAAJ,MAAA,CAAIb,KAAK,MAAG;EAEvG,IAAMmB,cAGL,GAAG,CAAC,CAAC;EAEN,IAAIjB,cAAc,EAAE;IAChBiB,cAAc,CAACC,UAAU,GAAGF,eAAe;IAC3CC,cAAc,CAACP,KAAK,GAAGA,KAAK;EAChC,CAAC,MAAM;IACHO,cAAc,CAACP,KAAK,GAAGM,eAAe;EAC1C;EAEA,oBACI9B,IAAA,CAACH,UAAU;IACPM,IAAI,EAAEA,IAAK;IACX8B,kBAAkB,EAAEnC,YAAY,CAAC;MAACQ,IAAI,EAAJA,IAAI;MAAEU,MAAM,EAANA;IAAM,CAAC,EAAEZ,SAAS,CAAE;IAC5DI,UAAU,EAAEA,UAAW;IACvBE,IAAI,EAAEA,IAAK;IACXqB,cAAc,EAAEA;EAAe,CAClC,CAAC;AAEV,CACJ,CAAC;AAED9B,UAAU,CAACiC,WAAW,GAAG,YAAY","ignoreList":[]}

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

@@ -0,0 +1,123 @@
+# GoalIcon
+
+<!-- description:start -->
+Displays a colored icon for a Tracker goal entity. The icon color is deterministically derived from the `goalId`, so the same goal always renders the same color across sessions and environments.
+<!-- description:end -->
+
+## Usage
+
+```tsx
+import {GoalIcon} from '@weavix/tracker-components';
+
+<GoalIcon goalId={456} />
+```
+
+## Component props
+
+<!-- props:start -->
+```ts
+{
+    /**
+     * Goal ID used to generate a deterministic color.
+     * Accepts either a numeric shortId or a string entity ID.
+     */
+    goalId: number | string;
+
+    /**
+     * Additional CSS class applied to the root element.
+     */
+    className?: string;
+
+    /**
+     * Entity type label. Defaults to "goal".
+     */
+    type?: string;
+
+    /**
+     * Size of the SVG icon inside the container in pixels.
+     * @default 16
+     */
+    size?: number;
+
+    /**
+     * Size of the icon container (the colored square) in pixels.
+     * @default 24
+     */
+    refugeSize?: number;
+
+    /**
+     * Whether to render a colored background behind the icon.
+     * @default true
+     */
+    withBackground?: boolean;
+
+    /**
+     * Border radius variant of the icon container.
+     * @default 'm'
+     */
+    radius?: 'm' | 'l';
+
+    /**
+     * Alpha (opacity) of the icon foreground color.
+     * @default 1
+     */
+    colorAlpha?: number;
+}
+```
+<!-- props:end -->
+
+---
+
+## Examples
+
+### Default
+
+```tsx
+import {GoalIcon} from '@weavix/tracker-components';
+
+<GoalIcon goalId={456} />
+```
+
+### Custom size
+
+```tsx
+// Larger icon container with a larger SVG inside
+<GoalIcon goalId={456} size={20} refugeSize={32} />
+```
+
+### Without background
+
+```tsx
+// Renders only the colored SVG, no background square
+<GoalIcon goalId={456} withBackground={false} />
+```
+
+### Alongside goal name
+
+```tsx
+import {GoalIcon} from '@weavix/tracker-components';
+
+export const GoalLabel = ({goal}: {goal: {shortId: number; summary: string}}) => (
+    <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
+        <GoalIcon goalId={goal.shortId} />
+        <span>{goal.summary}</span>
+    </div>
+);
+```
+
+### Multiple goals (each gets a unique color)
+
+```tsx
+const goals = [
+    {shortId: 1, summary: 'Increase retention'},
+    {shortId: 2, summary: 'Launch mobile app'},
+    {shortId: 3, summary: 'Reduce churn'},
+];
+
+goals.map((g) => (
+    <div key={g.shortId} style={{display: 'flex', alignItems: 'center', gap: 8}}>
+        <GoalIcon goalId={g.shortId} />
+        <span>{g.summary}</span>
+    </div>
+));
+```

package/build/esm/components/Icon/IconRefuge/IconRefuge.classname.js.map

@@ -1 +1 @@
-{"version":3,"names":["block","cnIconRefuge"],"sources":["IconRefuge.classname.tsx"],"sourcesContent":["import {block} from '~/src/components/cn';\n\nexport const cnIconRefuge = block('icon-refuge');\n"],"mappings":"AAAA,SAAQA,KAAK;AAEb,OAAO,IAAMC,YAAY,GAAGD,KAAK,CAAC,aAAa,CAAC","ignoreList":[]}
+{"version":3,"names":["block","cnIconRefuge"],"sources":["IconRefuge.classname.ts"],"sourcesContent":["import {block} from '~/src/components/cn';\n\nexport const cnIconRefuge = block('icon-refuge');\n"],"mappings":"AAAA,SAAQA,KAAK;AAEb,OAAO,IAAMC,YAAY,GAAGD,KAAK,CAAC,aAAa,CAAC","ignoreList":[]}

package/build/esm/components/Icon/IconRefuge/IconRefuge.css

@@ -3,9 +3,6 @@
   align-items: center;
   justify-content: center;
 }
-.tpc-icon-refuge_inline {
-  display: inline-flex;
-}
 .tpc-icon-refuge__hidden-label {
   position: absolute;
   overflow: hidden;

package/build/esm/components/Icon/IconRefuge/IconRefuge.css.map

@@ -1 +1 @@
-{"version":3,"sources":["IconRefuge.scss"],"names":[],"mappings":"AAAA;EACI,oBAAA;EACA,mBAAA;EACA,uBAAA;AACJ;AACI;EACI,oBAAA;AACR;AAEI;EACI,kBAAA;EAEA,gBAAA;EACA,mBAAA;EAEA,UAAA;EACA,WAAA;EACA,UAAA;EACA,YAAA;EAEA,mBAAA;AAHR","file":"IconRefuge.css","sourcesContent":[".tpc-icon-refuge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    &_inline {\n        display: inline-flex;\n    }\n\n    &__hidden-label {\n        position: absolute;\n\n        overflow: hidden;\n        clip: rect(0 0 0 0);\n\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n\n        white-space: nowrap;\n    }\n}\n"],"sourceRoot":""}
+{"version":3,"sources":["IconRefuge.scss"],"names":[],"mappings":"AAAA;EACI,oBAAA;EACA,mBAAA;EACA,uBAAA;AACJ;AACI;EACI,kBAAA;EAEA,gBAAA;EACA,mBAAA;EAEA,UAAA;EACA,WAAA;EACA,UAAA;EACA,YAAA;EAEA,mBAAA;AAFR","file":"IconRefuge.css","sourcesContent":[".tpc-icon-refuge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    &__hidden-label {\n        position: absolute;\n\n        overflow: hidden;\n        clip: rect(0 0 0 0);\n\n        width: 1px;\n        height: 1px;\n        padding: 0;\n        margin: -1px;\n\n        white-space: nowrap;\n    }\n}\n"],"sourceRoot":""}

package/build/esm/components/Icon/IconRefuge/IconRefuge.scss

@@ -3,10 +3,6 @@
     align-items: center;
     justify-content: center;
 
-    &_inline {
-        display: inline-flex;
-    }
-
     &__hidden-label {
         position: absolute;