@maltjoy/mcp-server 0.4.0 → 0.6.0-beta.0

package/dist/doc/VJoyAvailability/guideline.md

@@ -0,0 +1,352 @@
+---
+component: VJoyAvailability
+status: draft
+language: en
+dsds: JoyAvailability.dsds.json
+dsdsVersion: "0.15.2"
+---
+
+# Availability
+
+Use **`VJoyAvailability`** when you need to show a freelancer’s (or user’s) availability at a glance — as a colored status dot, with an optional short label.
+
+It maps backend availability states to Joy semantic colors, supports a hollow “partial” dot, and truncates long labels with ellipsis while exposing the full text via the native `title` tooltip.
+
+| | |
+| --- | --- |
+| **Code** | `VJoyAvailability` from `@maltjoy/core-vue` |
+| **Design** | [ZeroHeight — Availability](https://zeroheight.com/6bf479565/p/1423580-availability) |
+| **Storybook** | [VJoyAvailability docs](https://doc.malt.tech/joy-storybook/?path=/docs/components-view-vjoyavailability--docs) |
+| **DSDS (machine)** | [`JoyAvailability.dsds.json`](./JoyAvailability.dsds.json) |
+| **Live API** | `joy_get_component_info("VJoyAvailability")` |
+
+---
+
+## When to use this component
+
+Use availability when someone needs to read **current work availability** on profile surfaces — search results, freelancer cards, headers, or compact list rows.
+
+Choose **dot + label** on profile and search contexts where the status should be explicit. Choose **dot only** in dense layouts (for example a freelancer pool beside an avatar) where space is tight and the dot color carries the meaning.
+
+### When not to use this component
+
+| Need | Use instead |
+| --- | --- |
+| Generic status / category label (not availability) | `VJoyBadge` |
+| Simple notification or count dot | `VJoyDot` |
+| Rich alert or callout with title and body | `VJoyHighlight` |
+| Editable availability settings (form control) | Product-specific settings UI — not this read-only indicator |
+| Custom colored dot + ad-hoc label markup | Still use `VJoyAvailability` + Joy tokens — don’t reinvent chrome |
+
+---
+
+## How it works
+
+### Anatomy
+
+| Part | Required? | What it is |
+| --- | --- | --- |
+| Root container | Yes | `<div class="joy-availability">` — always rendered in `VJoyAvailability` |
+| Status dot | Yes | `<span class="joy-availability__dot">` with a `status` class and optional `joy-availability--partial` |
+| Label | No | Plain text from the `label` prop; omitted for dot-only display |
+| Label chrome | No* | `joy-availability-has-label` adds pill background and padding when `label` is set |
+| Native tooltip | No* | `title` on the root mirrors `label` when provided (full text on hover) |
+
+\*Present only when `label` is set.
+
+### Default values
+
+- `status` defaults to **`AVAILABLE`**
+- `isPartial` defaults to **`false`**
+- `label` defaults to **`undefined`** (dot-only)
+
+Props: use Joy MCP (`joy_get_component_info`, `joy_get_component_types`) or Storybook — this page focuses on **when** and **how**, not a full API dump. There are **no events** and **no slots**.
+
+### Display modes
+
+| Mode | When | What renders |
+| --- | --- | --- |
+| **Default (dot + label)** | Search, freelancer profiles, anywhere the status must be readable without relying on color alone | Colored dot + truncated label in a pill |
+| **Dot only** | Dense lists, avatar overlays (freelancer pool) | Dot without label text — pair with `VJoyAvatar` (bottom-right placement per design) |
+
+---
+
+## Variants
+
+`status` is the only visual variant. Pick it from **backend availability data**, not from preferred colors.
+
+Allowed values (from `TJoyAvailabilityStatus`): `AVAILABLE`, `AVAILABLE_AND_VERIFIED`, `NOT_AVAILABLE_WITH_DATE`, `AVAILABLE_SOON`, `NOT_AVAILABLE`.
+
+### `AVAILABLE`
+
+Use when the user is available but the “verified availability” state does not apply (neutral / secondary tone).
+
+Avoid when the product surface expects the verified-available green state.
+
+### `AVAILABLE_AND_VERIFIED`
+
+Use when availability is confirmed / verified (success green dot).
+
+Avoid substituting `AVAILABLE` when the data model exposes verified availability.
+
+### `AVAILABLE_SOON`
+
+Use when the user will become available soon (warning tone).
+
+Avoid for indefinite unavailability — use `NOT_AVAILABLE` or `NOT_AVAILABLE_WITH_DATE`.
+
+### `NOT_AVAILABLE`
+
+Use for fully unavailable users (filled error-colored dot).
+
+Avoid when a return date is known and should appear in the label — prefer `NOT_AVAILABLE_WITH_DATE` + descriptive `label`.
+
+### `NOT_AVAILABLE_WITH_DATE`
+
+Use when unavailable **and** a date (or date phrase) belongs in the label (hollow error-bordered dot).
+
+Pair with a label such as `Not available until 30 July` — the component truncates overflow but keeps the full string in `title`.
+
+### Partial availability (`isPartial`)
+
+Set `isPartial` to **`true`** for partially available users. The dot renders **hollow** (transparent fill) while keeping the `status` border color.
+
+Use with `AVAILABLE_AND_VERIFIED` (or another positive status) when “partly available” is distinct from fully available.
+
+### Not in the API: `INVISIBLE`
+
+Legacy Stencil styles reference an `INVISIBLE` status class. It is **not** in `TJoyAvailabilityStatus`. Do not emit `status="INVISIBLE"`. Map hidden availability in product logic instead of inventing a status value.
+
+---
+
+## Sizes
+
+Single visual scale — **no `size` prop**.
+
+| Aspect | Guidance |
+| --- | --- |
+| Dot | `--availability-dot-size` (15px default) — don’t hardcode dot diameter in apps |
+| Label typography | `primary-200` via Joy font utilities |
+| Pill height | `--joy-core-spacing-7` on the labeled container |
+| Long labels | `text-overflow: ellipsis` + `white-space: nowrap`; full text in `title` |
+
+**Don’t** override `.joy-availability` padding, radius, or dot dimensions in product CSS unless theming through the documented CSS custom properties.
+
+---
+
+## States
+
+Presentational component — no hover, focus, or disabled interaction states. Meaning comes from **`status`** and **`isPartial`**.
+
+| Status / flag | What the user sees |
+| --- | --- |
+| `AVAILABLE` | Filled secondary-toned dot |
+| `AVAILABLE_AND_VERIFIED` | Filled success-toned dot |
+| `AVAILABLE_SOON` | Filled warning-toned dot |
+| `NOT_AVAILABLE` | Filled error-toned dot |
+| `NOT_AVAILABLE_WITH_DATE` | Hollow dot with error border (transparent fill) |
+| `isPartial: true` | Hollow dot (transparent fill) for any `status` |
+| With `label` | Pill background (`--availability-background`), truncated text, `title` tooltip |
+| Without `label` | Dot only inside the root container |
+
+---
+
+## Best practices
+
+Rules use RFC 2119 strength (**MUST** / **SHOULD** / **MUST NOT** / **SHOULD NOT**).
+
+### Selection and placement
+
+- **SHOULD** use **dot + label** on search and profile surfaces (ZeroHeight default).
+- **SHOULD** use **dot only** on freelancer pool rows, positioned with `VJoyAvatar` per design (bottom-right of the avatar).
+- **MUST NOT** rely on dot color alone when the label fits the layout — add `label` for clarity.
+- **SHOULD** keep labels short; move long date phrases into `label` knowing truncation is expected in narrow columns.
+
+### Implementation
+
+- **MUST** use only `status` values from MCP or `JoyAvailability.types.ts`.
+- **MUST** map `status` from API / domain models — don’t pick colors manually.
+- **MUST** style with Joy tokens or documented CSS variables (`--availability-*`) — no custom availability chrome.
+- **MUST NOT** invent props (`variant`, `size`, `color`, …).
+- **MUST NOT** emit `status="INVISIBLE"` or other undocumented status strings.
+- **SHOULD** set `isPartial` only when product rules define partial availability.
+
+### Do / don’t
+
+| Do | Don’t |
+| --- | --- |
+| `status` from backend data | Hardcoded green/red dots in custom markup |
+| Short, scannable labels | Paragraph-length status text |
+| Dot-only beside avatars in pools | Dot-only on profile headers without context |
+| `NOT_AVAILABLE_WITH_DATE` + date label | `NOT_AVAILABLE` when a date should be shown |
+| Theme via `--availability-*` variables | Override `.joy-availability__dot` border colors ad hoc |
+
+---
+
+## Content
+
+Labels describe **availability status** in plain language. They are required for accessible, unambiguous reading wherever space allows.
+
+### Label formula
+
+**Status phrase**, optionally with a **time boundary**:
+
+- ✅ Available
+- ✅ Available soon
+- ✅ Not available
+- ✅ Not available until 30 July
+
+Keep copy aligned with the `status` value — don’t show a green verified dot with “Unavailable” text.
+
+### Writing rules
+
+| Strength | Rule |
+| --- | --- |
+| **MUST** | Label meaning must match `status` (color + words tell the same story) |
+| **MUST** | Use sentence case |
+| **MUST** | Prefer concise phrases; long strings truncate with ellipsis in tight layouts |
+| **MUST NOT** | Duplicate the user’s name in the label — context already identifies who |
+| **MUST NOT** | Use availability labels as CTAs (“Change availability”) — this is read-only status |
+| **SHOULD** | ≤ ~40 characters when possible; dates may be longer (tooltip preserves full text) |
+| **SHOULD** | Localize date phrases (`30 July` / `30 juillet`) via i18n in the app layer |
+| **SHOULD** | For dot-only mode, ensure surrounding UI (avatar, row title, tooltip) supplies context |
+
+### Patterns
+
+**Profile / search** — Dot + label: `label="Available"` with `status="AVAILABLE_AND_VERIFIED"` when verified.
+
+**Freelancer pool** — Dot only on the avatar corner; no `label` prop.
+
+**Temporary unavailability** — `status="NOT_AVAILABLE_WITH_DATE"` and label `Not available until {date}`.
+
+---
+
+## Accessibility
+
+Read-only status display — not interactive. Color reinforces meaning but must not be the only cue when a label is shown.
+
+| Behavior | Expectation |
+| --- | --- |
+| Role | Plain text in a `<div>` — not a button or live region |
+| Name | Visible `label` text provides the accessible name when present |
+| Dot-only | No accessible name on the component itself — provide context in adjacent text or an enclosing link/card label |
+| Color | Pair dot color with `label` wherever layout allows |
+| Tooltip | Native `title` exposes full label when truncated — don’t rely on `title` as the primary accessible name |
+| Motion | No animation — no reduced-motion concerns |
+
+Target: **WCAG 2.2 AA** where the product requires it. For dot-only avatar overlays, ensure the avatar or parent row has an accessible name that includes availability when it matters.
+
+---
+
+## Examples
+
+```vue
+<script setup lang="ts">
+import { VJoyAvailability } from '@maltjoy/core-vue'
+</script>
+
+<template>
+  <!-- Profile / search: dot + label -->
+  <VJoyAvailability
+    status="AVAILABLE_AND_VERIFIED"
+    label="Available"
+  />
+
+  <!-- Partially available -->
+  <VJoyAvailability
+    status="AVAILABLE_AND_VERIFIED"
+    :is-partial="true"
+    label="Partially available"
+  />
+
+  <!-- Unavailable with return date -->
+  <VJoyAvailability
+    status="NOT_AVAILABLE_WITH_DATE"
+    label="Not available until 30 July"
+  />
+
+  <!-- Dense pool row: dot only (often beside VJoyAvatar) -->
+  <VJoyAvailability status="AVAILABLE_SOON" />
+
+  <!-- Soon / not available -->
+  <VJoyAvailability status="NOT_AVAILABLE" label="Not available" />
+</template>
+```
+
+In Nuxt (or apps with auto-import), omit the import if `VJoyAvailability` is already global.
+
+---
+
+## Related
+
+| Component | Use when |
+| --- | --- |
+| `VJoyAvatar` | User photo / initials — availability dot overlays the avatar in pool views |
+| `VJoyBadge` | Generic tags, categories, or non-availability status |
+| `VJoyDot` | Notification counts or simple semantic dots unrelated to availability |
+| `VJoyUserCard` | Structured profile cards that may compose avatar + metadata |
+| `VJoyTooltip` | Extra explanation when dot-only mode needs supplementary detail |
+
+---
+
+## For agents
+
+Optional for readers; **required** for vibe-coding quality. Maps to `agentDocumentBlocks` in [`JoyAvailability.dsds.json`](./JoyAvailability.dsds.json).
+
+### Pick the right component
+
+| If the intent is… | Emit… | Do not emit… |
+| --- | --- | --- |
+| Freelancer / user availability | `VJoyAvailability` | `VJoyBadge` or `VJoyDot` with custom colors |
+| Generic status tag | `VJoyBadge` | `VJoyAvailability` |
+| Notification count on an icon | `VJoyDot` | `VJoyAvailability` |
+| Avatar with pool overlay dot | `VJoyAvatar` + `VJoyAvailability` (no label) | Custom positioned `<span>` |
+| Editable schedule | Form / settings UI | Read-only `VJoyAvailability` |
+
+### Hard rules
+
+1. **MUST** call `joy_get_component_info("VJoyAvailability")` and/or `joy_get_component_types("VJoyAvailability")` (or read `JoyAvailability.types.ts`) before generating props.
+2. **MUST** use only documented props: `label`, `status`, `isPartial`.
+3. **MUST** use only `TJoyAvailabilityStatus` enum values — no invented statuses (`INVISIBLE`, `offline`, …).
+4. **MUST NOT** invent props (`variant`, `size`, `color`, `href`, …).
+5. **MUST NOT** override `.joy-availability` / `.joy-availability__dot` colors in product CSS — use `status` + tokens.
+6. **SHOULD** default to `status="AVAILABLE"` when data is missing; prefer explicit mapping from API fields.
+7. **SHOULD** omit `label` for dot-only avatar overlays; include `label` on profile and search surfaces.
+
+### Valid enums (from `JoyAvailability.types.ts`)
+
+| Prop | Values |
+| --- | --- |
+| `status` | `AVAILABLE`, `AVAILABLE_AND_VERIFIED`, `NOT_AVAILABLE_WITH_DATE`, `AVAILABLE_SOON`, `NOT_AVAILABLE` |
+| `isPartial` | `true`, `false` (default `false`) |
+| `label` | `string` or omit |
+
+### Checklist
+
+- [ ] Correct component (`VJoyAvailability` or named alternative)
+- [ ] `status` from `TJoyAvailabilityStatus` only
+- [ ] `label` text consistent with `status`
+- [ ] `isPartial` only for defined partial-availability cases
+- [ ] Dot-only only in dense / avatar-overlay contexts
+- [ ] No invented props / no custom availability chrome CSS
+- [ ] Long labels understood to truncate; `title` is a bonus, not primary a11y
+
+---
+
+## DSDS mapping
+
+This Markdown mirrors [`JoyAvailability.dsds.json`](./JoyAvailability.dsds.json) (DSDS **0.15.2**).
+
+| Section here | DSDS block |
+| --- | --- |
+| When to use / not | `use-cases` |
+| Anatomy | `anatomy` |
+| Variants (`status` / `isPartial`) | `variants` |
+| Sizes | `design-specifications` |
+| States | `states` |
+| Best practices / content rules | `guidelines` (+ `content`) |
+| Accessibility | `accessibility` |
+| Examples | `sections` |
+| For agents | `agentDocumentBlocks` |
+| Props detail | `api` in JSON + Joy MCP |
+| Imports | `imports` in JSON |

package/dist/doc/VJoyAvatar/guideline.md

@@ -0,0 +1,192 @@
+---
+component: VJoyAvatar
+status: draft
+language: en
+dsds: JoyAvatar.dsds.json
+dsdsVersion: "0.15.2"
+---
+
+# Avatar
+
+Use **`VJoyAvatar`** when you need to show a person (or overflow count) at a glance — profile photo, initials, anonymous placeholder, or a “+N more” chip in a list.
+
+It supports six sizes, optional click styling via `link` (you handle navigation in `@click`), a Malt Strategy badge, and a default slot for custom image markup when `photoUrl` is not enough.
+
+| | |
+| --- | --- |
+| **Code** | `VJoyAvatar` from `@maltjoy/core-vue` |
+| **Design** | [ZeroHeight — Avatar](https://zeroheight.com/6bf479565/p/52ceb2-avatar) |
+| **Storybook** | [VJoyAvatar docs](https://doc.malt.tech/joy-storybook/?path=/docs/components-view-vjoyavatar--docs) |
+| **DSDS (machine)** | [`JoyAvatar.dsds.json`](./JoyAvatar.dsds.json) |
+| **Live API** | `joy_get_component_info("VJoyAvatar")` |
+
+---
+
+## When to use this component
+
+Use an avatar to identify a user in compact UI — profile headers, comment threads, member lists, cards, or toolbars. Provide `photoUrl` (or an `<img>` in the default slot) when a photo exists; otherwise pass `fullName` so initials render on a colored background.
+
+For stacked or overlapping avatars, compose multiple `VJoyAvatar` instances inside **`VJoyAvatarsList`** (optionally with `compress`). Use `totalNumber` on the last avatar to show how many people are not shown (for example `+18`).
+
+### When not to use this component
+
+| Need | Use instead |
+| --- | --- |
+| A group container with list spacing / compression | `VJoyAvatarsList` wrapping `VJoyAvatar` children |
+| Company logo only (legacy) | `VJoyAvatar` with `placeholder="company-placeholder"` — **`VJoyCompanyAvatar` is deprecated** |
+| Full user identity block (name, role, metadata) | `VJoyUserCard` |
+| A decorative illustration or generic icon | `VJoyIcon` / `VJoyIllustration` — not an avatar |
+| Real navigation via URL (`href`) | `link` + `@click` with your router, or wrap with `VJoyLink` — `link` only applies button styling |
+| Custom circular image markup / ad-hoc CSS | Still use `VJoyAvatar` + Joy tokens — don’t reinvent chrome |
+
+> **Deprecated:** `VJoyCompanyAvatar` — merged into `VJoyAvatar` (see release notes). Do not add new usages of the old component.
+
+> **Not in the Vue API:** legacy Stencil `joy-avatar` props `href`, `color`, `compress`, and `is-first-from-list`. Compression comes from `VJoyAvatarsList` via provide/inject; there is no `color` or `href` prop on `VJoyAvatar`.
+
+---
+
+## How it works
+
+### Anatomy
+
+| Part | Required? | What it is |
+| --- | --- | --- |
+| Wrapper | Yes | `.joy-avatar__wrapper` — sets dimensions from `size` |
+| Avatar surface | Yes | Root `.joy-avatar` — photo, initials, icon, or `+N` text |
+| Photo | No | `<img>` from `photoUrl` or default slot (slot preferred for perf / Nuxt image wrappers) |
+| Initials | No | Up to two letters from `fullName` (first letter of first two name segments) |
+| Placeholder icon | No | `VJoyIcon` when anonymous (`placeholder`, default `user-photo`) |
+| Strategy badge | No | `.joy-avatar__strategy` SVG when `profile="strategy"` |
+| Focus ring | Yes* | Box shadow on focus when the surface is focusable (`link`) |
+
+### Display modes (by props, not a `variant` prop)
+
+| Mode | When it appears |
+| --- | --- |
+| **Photo** | `photoUrl` set, or default slot contains an `<img>` |
+| **Initials** | `fullName` set, no photo, `showLetters` not `false` |
+| **Anonymous** | No `fullName`, `photoUrl`, `totalNumber`, or `isEmpty` — shows placeholder icon |
+| **Empty** | `isEmpty` — neutral bordered circle, no icon or text |
+| **Overflow count** | `totalNumber` — shows `+{n}` (mutually exclusive with `fullName` and `photoUrl`) |
+| **Strategy** | `profile="strategy"` — adds the Strategy badge overlay |
+
+### Default values
+
+- `size` defaults to **`medium`**
+- `profile` defaults to **`default`**
+- `loading` defaults to **`lazy`** (on the built-in `<img>` when `photoUrl` is used)
+- `isEmpty` defaults to **`false`**
+- `placeholder` defaults to **`user-photo`**
+- `showLetters` defaults to **`true`**
+- `link` defaults to **`false`**
+
+Props, events, and slots: use Joy MCP or Storybook — this page focuses on **when** and **how**, not a full API dump.
+
+---
+
+## Best practices
+
+Rules use RFC 2119 strength (**MUST** / **SHOULD** / **MUST NOT** / **SHOULD NOT**).
+
+### Data and display
+
+- **MUST NOT** combine `totalNumber` with `fullName` or `photoUrl` — pick either a person avatar or an overflow chip (enforced by ESLint).
+- **SHOULD** pass `fullName` whenever a photo is shown so `alt` / `title` stay meaningful.
+- **SHOULD** use the default slot (custom `<img>` or image component) instead of `photoUrl` when you need framework-specific image optimization.
+- **SHOULD** set `showLetters` to `false` only when you want the placeholder icon despite having a name (rare).
+
+### Lists and navigation
+
+- **SHOULD** wrap multiple avatars in `VJoyAvatarsList`; use `compress` on the list for overlapping stacks — do not set compression on individual avatars.
+- **MUST** handle routing yourself when `link` is true — the root becomes a `<button type="button">`; there is no built-in `href`.
+- **SHOULD** reserve `profile="strategy"` for Malt Strategy consultants only.
+
+### Implementation
+
+- **MUST** use only documented prop / enum values (MCP / types). Sizes: `xsmall`, `small`, `medium`, `large`, `xlarge`, `xxlarge`.
+- **MUST** use Joy tokens — no custom avatar chrome CSS (dimensions come from `--avatar-size` and related tokens).
+- **MUST NOT** invent props (`color`, `href`, `compress` from legacy Stencil are not on `VJoyAvatar`).
+
+### Do / don’t
+
+| Do | Don’t |
+| --- | --- |
+| Photo + `fullName` for accessible images | `totalNumber` alongside `fullName` or `photoUrl` |
+| `VJoyAvatarsList` for groups | Manual negative margins to overlap avatars |
+| `@click` + router when `link` | Expect `link` to navigate by itself |
+| `placeholder="company-placeholder"` for org logos | New `VJoyCompanyAvatar` instances |
+
+---
+
+## Accessibility
+
+Behaviors (what must happen), not slogans.
+
+| Behavior | Expectation |
+| --- | --- |
+| Image name | When `photoUrl` (or slot img) is used, `alt` and `title` come from `fullName` — provide it when possible |
+| Non-photo identity | Initials or `+N` text are visible content; anonymous state relies on the placeholder icon (decorative in context — ensure nearby text names the person) |
+| Clickable avatar | With `link`, root is a `<button>`; keyboard users get focus ring (`--joy-form-field-focus-shadow`) — wire `@click` for the action |
+| Hover | `link` reduces opacity on hover — supplementary cue only; don’t rely on hover alone for critical info |
+
+Target: **WCAG 2.2 AA** where the product requires it.
+
+---
+
+## Examples
+
+```vue
+<script setup lang="ts">
+import { VJoyAvatar, VJoyAvatarsList } from '@maltjoy/core-vue'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+function goToProfile() {
+  router.push('/profile/ada')
+}
+</script>
+
+<template>
+  <!-- Photo + accessible name -->
+  <VJoyAvatar
+    full-name="Ada Lovelace"
+    photo-url="https://example.com/ada.webp"
+    size="medium"
+  />
+
+  <!-- Initials fallback -->
+  <VJoyAvatar full-name="Jean-Sébastien Bach" size="small" />
+
+  <!-- Clickable (style only — handle navigation) -->
+  <VJoyAvatar
+    link
+    full-name="Ellie Sattler"
+    photo-url="https://example.com/ellie.webp"
+    @click="goToProfile"
+  />
+
+  <!-- Avatar list with overflow -->
+  <VJoyAvatarsList compress>
+    <VJoyAvatar photo-url="https://example.com/a.webp" full-name="User A" size="small" />
+    <VJoyAvatar photo-url="https://example.com/b.webp" full-name="User B" size="small" />
+    <VJoyAvatar :total-number="18" size="small" />
+  </VJoyAvatarsList>
+
+  <!-- Malt Strategy consultant -->
+  <VJoyAvatar full-name="Strategy Consultant" profile="strategy" size="large" />
+</template>
+```
+
+In Nuxt (or apps with auto-import), omit the import if `VJoyAvatar` is already global.
+
+---
+
+## Related
+
+| Component | Use when |
+| --- | --- |
+| `VJoyAvatarsList` | Layout and optional compression for multiple avatars |
+| `VJoyUserCard` | Avatar plus name, subtitle, and actions in a card |
+| `VJoyIcon` | Standalone icons without a circular avatar treatment |
+| `VJoyCompanyAvatar` | **Deprecated** — use `VJoyAvatar` with `placeholder="company-placeholder"` |