Pandore/homarr
Public Access
1
0 Fork 0
Code Actions Activity

chore(custom-widgets): format skill references

Browse Source
This commit is contained in:
Thomas Camlong committed 2026-07-20 23:45:06 +02:00
1 parent 1c02678a7e
commit 1faaf29c3b
7 files changed
+34843 -282
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.agents/skills/homarr-custom-widget/references/component-catalog.json
+34613 -1
View File
File diff suppressed because it is too large. Load diff
.agents/skills/homarr-custom-widget/references/components.md
+54 -56
View File
@@ -38,7 +38,6 @@ This is the complete Custom JSX component boundary for this Homarr release. The
[`ActionButton`](homarr-components.md#component-actionbutton), [`Collapsible`](homarr-components.md#component-collapsible), [`PaginatedList`](homarr-components.md#component-paginatedlist), [`RecursiveList`](homarr-components.md#component-recursivelist), [`RefreshButton`](homarr-components.md#component-refreshbutton), [`StatBar`](homarr-components.md#component-statbar), [`SubData`](homarr-components.md#component-subdata), [`SubFetch`](homarr-components.md#component-subfetch), [`TabPanel`](homarr-components.md#component-tabpanel), [`TablerIcon`](homarr-components.md#component-tablericon), [`TabsContainer`](homarr-components.md#component-tabscontainer), [`ToggleSwitch`](homarr-components.md#component-toggleswitch), [`TypeBadge`](homarr-components.md#component-typebadge)
## Complete denied inventory
### Mantine Core
@@ -57,60 +56,59 @@ This is the complete Custom JSX component boundary for this Homarr release. The
_None._
## Blocked capabilities
| Kind | Name | Reason |
| --- | --- | --- |
| prop | <code>__proto__</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>apply</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>arguments</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>autoFocus</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>backdropFilter</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>behavior</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>bottom</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>call</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>callee</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>caller</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>children</code> | Children must be expressed as interpreted JSX, not passed as a raw prop. |
| prop | <code>className</code> | Unscoped class injection can escape widget CSS isolation. |
| prop | <code>classNames</code> | Unscoped class injection can escape widget CSS isolation. |
| prop | <code>classes</code> | Unscoped class injection can escape widget CSS isolation. |
| prop | <code>clipPath</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>component</code> | Polymorphic roots can replace the Homarr-owned element boundary. |
| prop | <code>constructor</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>content</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>contentEditable</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>dangerouslySetInnerHTML</code> | Raw HTML injection is not available to authored widgets. |
| prop | <code>filter</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>form</code> | External form submission is outside the named-request security boundary. |
| prop | <code>formAction</code> | External form submission is outside the named-request security boundary. |
| prop | <code>formEncType</code> | External form submission is outside the named-request security boundary. |
| prop | <code>formMethod</code> | External form submission is outside the named-request security boundary. |
| prop | <code>formNoValidate</code> | External form submission is outside the named-request security boundary. |
| prop | <code>formTarget</code> | External form submission is outside the named-request security boundary. |
| prop | <code>innerRef</code> | Refs expose underlying React components and DOM nodes. |
| prop | <code>inset</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>left</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>mask</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>ping</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>pointerEvents</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>popover</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>popoverTarget</code> | Portal targeting can render or interact outside the widget root. |
| prop | <code>popoverTargetAction</code> | Portal targeting can render or interact outside the widget root. |
| prop | <code>portalProps</code> | Portal targeting can render or interact outside the widget root. |
| prop | <code>pos</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>position</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>prototype</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>ref</code> | Refs expose underlying React components and DOM nodes. |
| prop | <code>renderRoot</code> | Polymorphic roots can replace the Homarr-owned element boundary. |
| prop | <code>right</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>srcDoc</code> | Raw HTML injection is not available to authored widgets. |
| prop | <code>suppressContentEditableWarning</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>suppressHydrationWarning</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>top</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>withinPortal</code> | Portal targeting can render or interact outside the widget root. |
| prop | <code>zIndex</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop-pattern | <code>on*</code> | Authored event callbacks can execute code outside the declarative runtime. |
| prop-pattern | <code>*Ref</code> | Refs expose underlying React components and DOM nodes. |
| prop-pattern | <code>__*</code> | Private and prototype-related properties are outside the supported authoring surface. |
| Kind | Name | Reason |
| ------------ | ------------------------------------------- | ------------------------------------------------------------------------------------- |
| prop | <code>**proto**</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>apply</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>arguments</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>autoFocus</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>backdropFilter</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>behavior</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>bottom</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>call</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>callee</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>caller</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>children</code> | Children must be expressed as interpreted JSX, not passed as a raw prop. |
| prop | <code>className</code> | Unscoped class injection can escape widget CSS isolation. |
| prop | <code>classNames</code> | Unscoped class injection can escape widget CSS isolation. |
| prop | <code>classes</code> | Unscoped class injection can escape widget CSS isolation. |
| prop | <code>clipPath</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>component</code> | Polymorphic roots can replace the Homarr-owned element boundary. |
| prop | <code>constructor</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>content</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>contentEditable</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>dangerouslySetInnerHTML</code> | Raw HTML injection is not available to authored widgets. |
| prop | <code>filter</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>form</code> | External form submission is outside the named-request security boundary. |
| prop | <code>formAction</code> | External form submission is outside the named-request security boundary. |
| prop | <code>formEncType</code> | External form submission is outside the named-request security boundary. |
| prop | <code>formMethod</code> | External form submission is outside the named-request security boundary. |
| prop | <code>formNoValidate</code> | External form submission is outside the named-request security boundary. |
| prop | <code>formTarget</code> | External form submission is outside the named-request security boundary. |
| prop | <code>innerRef</code> | Refs expose underlying React components and DOM nodes. |
| prop | <code>inset</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>left</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>mask</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>ping</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>pointerEvents</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>popover</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>popoverTarget</code> | Portal targeting can render or interact outside the widget root. |
| prop | <code>popoverTargetAction</code> | Portal targeting can render or interact outside the widget root. |
| prop | <code>portalProps</code> | Portal targeting can render or interact outside the widget root. |
| prop | <code>pos</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>position</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>prototype</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>ref</code> | Refs expose underlying React components and DOM nodes. |
| prop | <code>renderRoot</code> | Polymorphic roots can replace the Homarr-owned element boundary. |
| prop | <code>right</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>srcDoc</code> | Raw HTML injection is not available to authored widgets. |
| prop | <code>suppressContentEditableWarning</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>suppressHydrationWarning</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>top</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop | <code>withinPortal</code> | Portal targeting can render or interact outside the widget root. |
| prop | <code>zIndex</code> | This capability is blocked by the Custom JSX safety boundary. |
| prop-pattern | <code>on*</code> | Authored event callbacks can execute code outside the declarative runtime. |
| prop-pattern | <code>*Ref</code> | Refs expose underlying React components and DOM nodes. |
| prop-pattern | <code>__*</code> | Private and prototype-related properties are outside the supported authoring surface. |
.agents/skills/homarr-custom-widget/references/homarr-components.md
+108 -95
View File
@@ -19,6 +19,7 @@ _None._
## Component records
<a id="component-actionbutton"></a>
### `ActionButton`
- Safety: `wrapped`
@@ -34,22 +35,23 @@ Runs a named user-triggered action.
#### Component-specific props
| Prop | Required | Type | Literal values | Description |
| --- | --- | --- | --- | --- |
| <code>color</code> | no | <code>string</code> | — | — |
| <code>confirmMessage</code> | no | <code>string</code> | — | — |
| <code>disabled</code> | no | <code>boolean &#124; string</code> | — | — |
| <code>errorMessage</code> | no | <code>string</code> | — | — |
| <code>fullWidth</code> | no | <code>boolean &#124; string</code> | — | — |
| <code>icon</code> | no | <code>string</code> | — | — |
| <code>label</code> | no | <code>string</code> | — | — |
| <code>params</code> | no | <code>Record&lt;string, string &#124; number &#124; boolean&gt;</code> | — | — |
| <code>requestId</code> | no | <code>string</code> | — | Identifier of the named Custom Widget action. |
| <code>size</code> | no | <code>string</code> | — | — |
| <code>successMessage</code> | no | <code>string</code> | — | — |
| <code>variant</code> | no | <code>string</code> | — | — |
| Prop | Required | Type | Literal values | Description |
| --------------------------- | -------- | ---------------------------------------------------------------------- | -------------- | --------------------------------------------- |
| <code>color</code> | no | <code>string</code> | — | — |
| <code>confirmMessage</code> | no | <code>string</code> | — | — |
| <code>disabled</code> | no | <code>boolean &#124; string</code> | — | — |
| <code>errorMessage</code> | no | <code>string</code> | — | — |
| <code>fullWidth</code> | no | <code>boolean &#124; string</code> | — | — |
| <code>icon</code> | no | <code>string</code> | — | — |
| <code>label</code> | no | <code>string</code> | — | — |
| <code>params</code> | no | <code>Record&lt;string, string &#124; number &#124; boolean&gt;</code> | — | — |
| <code>requestId</code> | no | <code>string</code> | — | Identifier of the named Custom Widget action. |
| <code>size</code> | no | <code>string</code> | — | — |
| <code>successMessage</code> | no | <code>string</code> | — | — |
| <code>variant</code> | no | <code>string</code> | — | — |
<a id="component-collapsible"></a>
### `Collapsible`
- Safety: `allowed`
@@ -65,12 +67,13 @@ Shows and hides a bounded content section.
#### Component-specific props
| Prop | Required | Type | Literal values | Description |
| --- | --- | --- | --- | --- |
| <code>defaultOpen</code> | no | <code>boolean</code> | — | — |
| <code>title</code> | yes | <code>string</code> | — | — |
| Prop | Required | Type | Literal values | Description |
| ------------------------ | -------- | -------------------- | -------------- | ----------- |
| <code>defaultOpen</code> | no | <code>boolean</code> | — | — |
| <code>title</code> | yes | <code>string</code> | — | — |
<a id="component-paginatedlist"></a>
### `PaginatedList`
- Safety: `allowed`
@@ -86,11 +89,12 @@ Renders a bounded page of collection items.
#### Component-specific props
| Prop | Required | Type | Literal values | Description |
| --- | --- | --- | --- | --- |
| <code>pageSize</code> | no | <code>number</code> | — | — |
| Prop | Required | Type | Literal values | Description |
| --------------------- | -------- | ------------------- | -------------- | ----------- |
| <code>pageSize</code> | no | <code>number</code> | — | — |
<a id="component-recursivelist"></a>
### `RecursiveList`
- Safety: `wrapped`
@@ -106,19 +110,20 @@ Renders an arbitrary-depth tree through a bounded, Homarr-owned traversal.
#### Component-specific props
| Prop | Required | Type | Literal values | Description |
| --- | --- | --- | --- | --- |
| <code>childrenPath</code> | yes | <code>string</code> | — | — |
| <code>data</code> | yes | <code>unknown</code> | — | — |
| <code>defaultExpandedDepth</code> | no | <code>number</code> | — | — |
| <code>gap</code> | no | <code>MantineSpacing</code> | — | — |
| <code>indent</code> | no | <code>MantineSpacing</code> | — | — |
| <code>keyPath</code> | yes | <code>string</code> | — | — |
| <code>maxDepth</code> | no | <code>number</code> | — | — |
| <code>maxNodes</code> | no | <code>number</code> | — | — |
| <code>showLines</code> | no | <code>boolean</code> | — | — |
| Prop | Required | Type | Literal values | Description |
| --------------------------------- | -------- | --------------------------- | -------------- | ----------- |
| <code>childrenPath</code> | yes | <code>string</code> | — | — |
| <code>data</code> | yes | <code>unknown</code> | — | — |
| <code>defaultExpandedDepth</code> | no | <code>number</code> | — | — |
| <code>gap</code> | no | <code>MantineSpacing</code> | — | — |
| <code>indent</code> | no | <code>MantineSpacing</code> | — | — |
| <code>keyPath</code> | yes | <code>string</code> | — | — |
| <code>maxDepth</code> | no | <code>number</code> | — | — |
| <code>maxNodes</code> | no | <code>number</code> | — | — |
| <code>showLines</code> | no | <code>boolean</code> | — | — |
<a id="component-refreshbutton"></a>
### `RefreshButton`
- Safety: `wrapped`
@@ -134,14 +139,15 @@ Refreshes load-triggered widget queries.
#### Component-specific props
| Prop | Required | Type | Literal values | Description |
| --- | --- | --- | --- | --- |
| <code>color</code> | no | <code>string</code> | — | — |
| <code>label</code> | no | <code>string</code> | — | — |
| <code>size</code> | no | <code>string</code> | — | — |
| <code>variant</code> | no | <code>string</code> | — | — |
| Prop | Required | Type | Literal values | Description |
| -------------------- | -------- | ------------------- | -------------- | ----------- |
| <code>color</code> | no | <code>string</code> | — | — |
| <code>label</code> | no | <code>string</code> | — | — |
| <code>size</code> | no | <code>string</code> | — | — |
| <code>variant</code> | no | <code>string</code> | — | — |
<a id="component-statbar"></a>
### `StatBar`
- Safety: `allowed`
@@ -157,14 +163,15 @@ Displays a compact labeled statistic and progress value.
#### Component-specific props
| Prop | Required | Type | Literal values | Description |
| --- | --- | --- | --- | --- |
| <code>color</code> | no | <code>string</code> | — | — |
| <code>label</code> | no | <code>string</code> | — | — |
| <code>max</code> | no | <code>number</code> | — | — |
| <code>value</code> | yes | <code>number</code> | — | — |
| Prop | Required | Type | Literal values | Description |
| ------------------ | -------- | ------------------- | -------------- | ----------- |
| <code>color</code> | no | <code>string</code> | — | — |
| <code>label</code> | no | <code>string</code> | — | — |
| <code>max</code> | no | <code>number</code> | — | — |
| <code>value</code> | yes | <code>number</code> | — | — |
<a id="component-subdata"></a>
### `SubData`
- Safety: `wrapped`
@@ -180,21 +187,22 @@ Reads a nested value from a named manual-query result.
#### Component-specific props
| Prop | Required | Type | Literal values | Description |
| --- | --- | --- | --- | --- |
| <code>as</code> | no | <code>'Text' &#124; 'Title' &#124; 'Badge' &#124; 'Code' &#124; 'Image'</code> | <code>"Text"</code>, <code>"Title"</code>, <code>"Badge"</code>, <code>"Code"</code>, <code>"Image"</code> | — |
| <code>c</code> | no | <code>string</code> | — | — |
| <code>color</code> | no | <code>string</code> | — | — |
| <code>fit</code> | no | <code>string</code> | — | — |
| <code>fw</code> | no | <code>number</code> | — | — |
| <code>h</code> | no | <code>string &#124; number</code> | — | — |
| <code>order</code> | no | <code>1 &#124; 2 &#124; 3 &#124; 4 &#124; 5 &#124; 6</code> | <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code> | — |
| <code>radius</code> | no | <code>string &#124; number</code> | — | — |
| <code>size</code> | no | <code>string</code> | — | — |
| <code>variant</code> | no | <code>string</code> | — | — |
| <code>w</code> | no | <code>string &#124; number</code> | — | — |
| Prop | Required | Type | Literal values | Description |
| -------------------- | -------- | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------- | ----------- |
| <code>as</code> | no | <code>'Text' &#124; 'Title' &#124; 'Badge' &#124; 'Code' &#124; 'Image'</code> | <code>"Text"</code>, <code>"Title"</code>, <code>"Badge"</code>, <code>"Code"</code>, <code>"Image"</code> | — |
| <code>c</code> | no | <code>string</code> | — | — |
| <code>color</code> | no | <code>string</code> | — | — |
| <code>fit</code> | no | <code>string</code> | — | — |
| <code>fw</code> | no | <code>number</code> | — | — |
| <code>h</code> | no | <code>string &#124; number</code> | — | — |
| <code>order</code> | no | <code>1 &#124; 2 &#124; 3 &#124; 4 &#124; 5 &#124; 6</code> | <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code>, <code>6</code> | — |
| <code>radius</code> | no | <code>string &#124; number</code> | — | — |
| <code>size</code> | no | <code>string</code> | — | — |
| <code>variant</code> | no | <code>string</code> | — | — |
| <code>w</code> | no | <code>string &#124; number</code> | — | — |
<a id="component-subfetch"></a>
### `SubFetch`
- Safety: `wrapped`
@@ -210,18 +218,19 @@ Runs a named manual query with invocation-time parameters.
#### Component-specific props
| Prop | Required | Type | Literal values | Description |
| --- | --- | --- | --- | --- |
| <code>as</code> | no | <code>'json' &#124; 'text'</code> | <code>"json"</code>, <code>"text"</code> | — |
| <code>errorMessage</code> | no | <code>string</code> | — | — |
| <code>fallback</code> | no | <code>ReactNode</code> | — | — |
| <code>loadingLabel</code> | no | <code>string</code> | — | — |
| <code>params</code> | no | <code>Record&lt;string, string &#124; number &#124; boolean&gt;</code> | — | — |
| <code>refreshInterval</code> | no | <code>number</code> | — | — |
| <code>requestId</code> | no | <code>string</code> | — | Identifier of the named Custom Widget query. |
| <code>trigger</code> | no | <code>'auto' &#124; 'manual'</code> | <code>"auto"</code>, <code>"manual"</code> | — |
| Prop | Required | Type | Literal values | Description |
| ---------------------------- | -------- | ---------------------------------------------------------------------- | ------------------------------------------ | -------------------------------------------- |
| <code>as</code> | no | <code>'json' &#124; 'text'</code> | <code>"json"</code>, <code>"text"</code> | — |
| <code>errorMessage</code> | no | <code>string</code> | — | — |
| <code>fallback</code> | no | <code>ReactNode</code> | — | — |
| <code>loadingLabel</code> | no | <code>string</code> | — | — |
| <code>params</code> | no | <code>Record&lt;string, string &#124; number &#124; boolean&gt;</code> | — | — |
| <code>refreshInterval</code> | no | <code>number</code> | — | — |
| <code>requestId</code> | no | <code>string</code> | — | Identifier of the named Custom Widget query. |
| <code>trigger</code> | no | <code>'auto' &#124; 'manual'</code> | <code>"auto"</code>, <code>"manual"</code> | — |
<a id="component-tabpanel"></a>
### `TabPanel`
- Safety: `allowed`
@@ -237,12 +246,13 @@ Renders content for one declarative tab.
#### Component-specific props
| Prop | Required | Type | Literal values | Description |
| --- | --- | --- | --- | --- |
| <code>label</code> | no | <code>string</code> | — | — |
| <code>value</code> | yes | <code>string</code> | — | — |
| Prop | Required | Type | Literal values | Description |
| ------------------ | -------- | ------------------- | -------------- | ----------- |
| <code>label</code> | no | <code>string</code> | — | — |
| <code>value</code> | yes | <code>string</code> | — | — |
<a id="component-tablericon"></a>
### `TablerIcon`
- Safety: `wrapped`
@@ -258,14 +268,15 @@ Resolves an installed Tabler icon by its safe name.
#### Component-specific props
| Prop | Required | Type | Literal values | Description |
| --- | --- | --- | --- | --- |
| <code>color</code> | no | <code>string</code> | — | — |
| <code>name</code> | yes | <code>string</code> | — | — |
| <code>size</code> | no | <code>string &#124; number</code> | — | — |
| <code>stroke</code> | no | <code>string &#124; number</code> | — | — |
| Prop | Required | Type | Literal values | Description |
| ------------------- | -------- | --------------------------------- | -------------- | ----------- |
| <code>color</code> | no | <code>string</code> | — | — |
| <code>name</code> | yes | <code>string</code> | — | — |
| <code>size</code> | no | <code>string &#124; number</code> | — | — |
| <code>stroke</code> | no | <code>string &#124; number</code> | — | — |
<a id="component-tabscontainer"></a>
### `TabsContainer`
- Safety: `allowed`
@@ -281,11 +292,12 @@ Renders a declarative tab container.
#### Component-specific props
| Prop | Required | Type | Literal values | Description |
| --- | --- | --- | --- | --- |
| <code>defaultTab</code> | no | <code>string</code> | — | — |
| Prop | Required | Type | Literal values | Description |
| ----------------------- | -------- | ------------------- | -------------- | ----------- |
| <code>defaultTab</code> | no | <code>string</code> | — | — |
<a id="component-toggleswitch"></a>
### `ToggleSwitch`
- Safety: `wrapped`
@@ -301,19 +313,20 @@ Runs named actions for the enabled and disabled states.
#### Component-specific props
| Prop | Required | Type | Literal values | Description |
| --- | --- | --- | --- | --- |
| <code>color</code> | no | <code>string</code> | — | — |
| <code>disabled</code> | no | <code>boolean &#124; string</code> | — | — |
| <code>disabledParams</code> | no | <code>Record&lt;string, string &#124; number &#124; boolean&gt;</code> | — | — |
| <code>enabledParams</code> | no | <code>Record&lt;string, string &#124; number &#124; boolean&gt;</code> | — | — |
| <code>errorMessage</code> | no | <code>string</code> | — | — |
| <code>initialValue</code> | no | <code>boolean &#124; string</code> | — | — |
| <code>label</code> | no | <code>string</code> | — | — |
| <code>requestId</code> | no | <code>string</code> | — | Identifier of the named Custom Widget action. |
| <code>size</code> | no | <code>string</code> | — | — |
| Prop | Required | Type | Literal values | Description |
| --------------------------- | -------- | ---------------------------------------------------------------------- | -------------- | --------------------------------------------- |
| <code>color</code> | no | <code>string</code> | — | — |
| <code>disabled</code> | no | <code>boolean &#124; string</code> | — | — |
| <code>disabledParams</code> | no | <code>Record&lt;string, string &#124; number &#124; boolean&gt;</code> | — | — |
| <code>enabledParams</code> | no | <code>Record&lt;string, string &#124; number &#124; boolean&gt;</code> | — | — |
| <code>errorMessage</code> | no | <code>string</code> | — | — |
| <code>initialValue</code> | no | <code>boolean &#124; string</code> | — | — |
| <code>label</code> | no | <code>string</code> | — | — |
| <code>requestId</code> | no | <code>string</code> | — | Identifier of the named Custom Widget action. |
| <code>size</code> | no | <code>string</code> | — | — |
<a id="component-typebadge"></a>
### `TypeBadge`
- Safety: `allowed`
@@ -329,7 +342,7 @@ Displays a compact semantic type badge.
#### Component-specific props
| Prop | Required | Type | Literal values | Description |
| --- | --- | --- | --- | --- |
| <code>size</code> | no | <code>'xs' &#124; 'sm' &#124; 'md' &#124; 'lg' &#124; 'xl'</code> | <code>"xs"</code>, <code>"sm"</code>, <code>"md"</code>, <code>"lg"</code>, <code>"xl"</code> | — |
| <code>type</code> | yes | <code>string</code> | — | — |
| Prop | Required | Type | Literal values | Description |
| ----------------- | -------- | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ----------- |
| <code>size</code> | no | <code>'xs' &#124; 'sm' &#124; 'md' &#124; 'lg' &#124; 'xl'</code> | <code>"xs"</code>, <code>"sm"</code>, <code>"md"</code>, <code>"lg"</code>, <code>"xl"</code> | — |
| <code>type</code> | yes | <code>string</code> | — | — |
.agents/skills/homarr-custom-widget/references/mantine-core.md
+2 -1
View File
@@ -4,6 +4,7 @@ This index lists Mantine documentation pages formatted for LLMs.
Each link points to a standalone Markdown file under the /llms path.
For a single consolidated file with all content, use:
- https://mantine.dev/llms-full.txt
## FAQ
@@ -53,7 +54,7 @@ For a single consolidated file with all content, use:
- [How to integrate custom input with use-form hook?](https://mantine.dev/llms/q-custom-input-use-form.md): Learn how to add use-form support for custom inputs
- [How to prevent Modal from closing?](https://mantine.dev/llms/q-how-to-prevent-modal-from-closing.md): Learn how to prevent Modal from closing when the user clicks outside of it or presses the Escape key
- [How to scroll to the top of the form if the form is submitted with errors?](https://mantine.dev/llms/q-scroll-to-the-top-of-the-form.md): Learn how to call a function when the form is submitted with errors
- [How to update Mantine dependencies?](https://mantine.dev/llms/q-how-to-update-dependencies.md): Learn how to update @mantine/*, @mantinex/* and postcss-preset-mantine dependencies manually or with ncu script
- [How to update Mantine dependencies?](https://mantine.dev/llms/q-how-to-update-dependencies.md): Learn how to update @mantine/_, @mantinex/_ and postcss-preset-mantine dependencies manually or with ncu script
- [How to use Dropzone with @mantine/form?](https://mantine.dev/llms/q-how-to-use-dropzone-with-form.md): Learn how to use Dropzone with @mantine/form to handle file selection state
- [How to use Mantine template on GitHub?](https://mantine.dev/llms/q-templates-usage.md): Learn how to create a new repository based on Mantine template
- [I get hydration warning about data-mantine-color-scheme attribute, what does it mean?](https://mantine.dev/llms/q-color-scheme-hydration-warning.md): Learn how hydration works and how to fix warnings
.agents/skills/homarr-custom-widget/references/mantine-dates.md
+21 -32
View File
@@ -1,4 +1,5 @@
# GettingStartedDates
Package: @mantine/dates
Import: import { GettingStartedDates } from '@mantine/dates';
@@ -15,9 +16,9 @@ npm install @mantine/dates dayjs
After installation import package styles at the root of your application:
```tsx
import '@mantine/core/styles.css';
import "@mantine/core/styles.css";
// ‼️ import dates styles after core package styles
import '@mantine/dates/styles.css';
import "@mantine/dates/styles.css";
```
## Do not forget to import styles
@@ -28,15 +29,13 @@ You've fallen into the trap of not importing dates styles!
To fix this issue, import dates styles at the root of your application:
```tsx
import '@mantine/dates/styles.css';
import "@mantine/dates/styles.css";
```
## Usage
After installing the `@mantine/dates` package and importing styles, you can use all components from it:
## Date values as strings
`@mantine/dates` components work with date strings: `YYYY-MM-DD` or `YYYY-MM-DD HH:mm:ss` depending on the component. Those strings do not include any timezone-specific information.
@@ -52,18 +51,18 @@ date library in your application, you will need to install it separately.
The `DatesProvider` component lets you set various settings that are shared across all
components exported from the `@mantine/dates` package. `DatesProvider` supports the following settings:
* `locale` – dayjs locale. Note that you also need to import the corresponding locale module from dayjs. The default value is `en`.
* `firstDayOfWeek` – a number from 0 to 6, where 0 is Sunday and 6 is Saturday. The default value is 1 – Monday.
* `weekendDays` – an array of numbers from 0 to 6, where 0 is Sunday and 6 is Saturday. The default value is `[0, 6]` – Saturday and Sunday.
* `consistentWeeks` – boolean. If `true`, every month will have 6 weeks. The default value is `false`.
- `locale` – dayjs locale. Note that you also need to import the corresponding locale module from dayjs. The default value is `en`.
- `firstDayOfWeek` – a number from 0 to 6, where 0 is Sunday and 6 is Saturday. The default value is 1 – Monday.
- `weekendDays` – an array of numbers from 0 to 6, where 0 is Sunday and 6 is Saturday. The default value is `[0, 6]` – Saturday and Sunday.
- `consistentWeeks` – boolean. If `true`, every month will have 6 weeks. The default value is `false`.
```tsx
import 'dayjs/locale/ru';
import { DatesProvider, MonthPickerInput, DatePickerInput } from '@mantine/dates';
import "dayjs/locale/ru";
import { DatesProvider, MonthPickerInput, DatePickerInput } from "@mantine/dates";
function Demo() {
return (
<DatesProvider settings={{ locale: 'ru', firstDayOfWeek: 0, weekendDays: [0] }}>
<DatesProvider settings={{ locale: "ru", firstDayOfWeek: 0, weekendDays: [0] }}>
<MonthPickerInput label="Pick month" placeholder="Pick month" />
<DatePickerInput mt="md" label="Pick date" placeholder="Pick date" />
</DatesProvider>
@@ -71,14 +70,13 @@ function Demo() {
}
```
## Consistent weeks
If you want to avoid layout shifts, set `consistentWeeks: true` in the `DatesProvider` settings.
This will ensure that every month has 6 weeks, even if outside days are not in the same month.
```tsx
import { DatePicker, DatesProvider } from '@mantine/dates';
import { DatePicker, DatesProvider } from "@mantine/dates";
function Demo() {
return (
@@ -89,7 +87,6 @@ function Demo() {
}
```
## Custom parse format
Some components like [DateInput](https://mantine.dev/llms/dates-date-input.md) require the [custom parse format](https://day.js.org/docs/en/plugin/custom-parse-format)
@@ -97,8 +94,8 @@ dayjs plugin. You need to extend dayjs with this plugin before using components
this is usually done once in your application root file, so you don't need to do it every time you use the component.
```tsx
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import dayjs from "dayjs";
import customParseFormat from "dayjs/plugin/customParseFormat";
dayjs.extend(customParseFormat);
```
@@ -111,16 +108,12 @@ and set `locale` either on `DatesProvider` or on each component individually.
Example of setting the locale on DatesProvider:
```tsx
import 'dayjs/locale/ru';
import "dayjs/locale/ru";
import { DatesProvider } from '@mantine/dates';
import { DatesProvider } from "@mantine/dates";
function Demo() {
return (
<DatesProvider settings={{ locale: 'ru' }}>
{/* Your app */}
</DatesProvider>
);
return <DatesProvider settings={{ locale: "ru" }}>{/* Your app */}</DatesProvider>;
}
```
@@ -130,17 +123,13 @@ top of the file where you are importing `dayjs/locale/x` – locale data
is required both on client and server.
```tsx
'use client';
"use client";
import 'dayjs/locale/ru';
import "dayjs/locale/ru";
import { DatesProvider } from '@mantine/dates';
import { DatesProvider } from "@mantine/dates";
function Demo() {
return (
<DatesProvider settings={{ locale: 'ru' }}>
{/* Your app */}
</DatesProvider>
);
return <DatesProvider settings={{ locale: "ru" }}>{/* Your app */}</DatesProvider>;
}
```
.agents/skills/homarr-custom-widget/references/runtime.md
+28 -18
View File
@@ -60,31 +60,41 @@ Binding types follow the component mode. `Accordion multiple`, `Chip.Group multi
Collection callbacks may use a tightly constrained block body when a value would otherwise be recomputed throughout the returned JSX:
```jsx
{data.pokemon.map((pokemon) => {
const segments = pokemon.url.split("/").filter((part) => part);
const dexId = segments.at(-1);
const favorite = inputs.favorites.includes(pokemon.name);
{
data.pokemon.map((pokemon) => {
const segments = pokemon.url.split("/").filter((part) => part);
const dexId = segments.at(-1);
const favorite = inputs.favorites.includes(pokemon.name);
return (
<Card key={dexId}>
<Text>#{dexId}</Text>
<Text>{pokemon.name}</Text>
{favorite && <Badge>Favorite</Badge>}
</Card>
);
})}
return (
<Card key={dexId}>
<Text>#{dexId}</Text>
<Text>{pokemon.name}</Text>
{favorite && <Badge>Favorite</Badge>}
</Card>
);
});
}
```
A page-level derived value may use a directly invoked, zero-argument inline arrow:
```jsx
{(() => {
const visiblePokemon = data.pokemon.filter(
(pokemon) => !inputs.favoritesOnly || inputs.favorites.includes(pokemon.name),
);
{
(() => {
const visiblePokemon = data.pokemon.filter(
(pokemon) => !inputs.favoritesOnly || inputs.favorites.includes(pokemon.name),
);
return <Stack>{visiblePokemon.map((pokemon) => <Text>{pokemon.name}</Text>)}</Stack>;
})()}
return (
<Stack>
{visiblePokemon.map((pokemon) => (
<Text>{pokemon.name}</Text>
))}
</Stack>
);
})();
}
```
A safe block contains one or more `const` declarations followed by exactly one final `return`. Each declaration uses one simple identifier and a required initializer made from existing safe expressions. Earlier local bindings are available to later initializers and to the return expression.
.agents/skills/homarr-custom-widget/references/widget-schema.json
+17 -79
View File
@@ -44,11 +44,7 @@
},
"networkScope": {
"type": "string",
"enum": [
"public",
"private",
"loopback"
]
"enum": ["public", "private", "loopback"]
},
"auth": {
"oneOf": [
@@ -60,9 +56,7 @@
"const": "none"
}
},
"required": [
"type"
],
"required": ["type"],
"additionalProperties": false
},
{
@@ -73,9 +67,7 @@
"const": "bearer"
}
},
"required": [
"type"
],
"required": ["type"],
"additionalProperties": false
},
{
@@ -86,9 +78,7 @@
"const": "basic"
}
},
"required": [
"type"
],
"required": ["type"],
"additionalProperties": false
},
{
@@ -105,10 +95,7 @@
"pattern": "^[!#$%&'*+\\-.^_`|~0-9A-Za-z]+$"
}
},
"required": [
"type",
"headerName"
],
"required": ["type", "headerName"],
"additionalProperties": false
},
{
@@ -124,22 +111,13 @@
"maxLength": 256
}
},
"required": [
"type",
"parameterName"
],
"required": ["type", "parameterName"],
"additionalProperties": false
}
]
}
},
"required": [
"id",
"name",
"baseUrl",
"networkScope",
"auth"
],
"required": ["id", "name", "baseUrl", "networkScope", "auth"],
"additionalProperties": false
}
},
@@ -163,20 +141,11 @@
},
"kind": {
"type": "string",
"enum": [
"query",
"action"
]
"enum": ["query", "action"]
},
"method": {
"type": "string",
"enum": [
"GET",
"POST",
"PUT",
"DELETE",
"PATCH"
]
"enum": ["GET", "POST", "PUT", "DELETE", "PATCH"]
},
"pathTemplate": {
"type": "string",
@@ -193,11 +162,7 @@
},
"additionalProperties": {
"type": "string",
"enum": [
"string",
"number",
"boolean"
]
"enum": ["string", "number", "boolean"]
}
},
"optionsBinding": {
@@ -227,9 +192,7 @@
"maxLength": 64
}
},
"required": [
"$option"
],
"required": ["$option"],
"additionalProperties": false
}
]
@@ -264,26 +227,16 @@
},
"auth": {
"type": "string",
"enum": [
"inherit",
"none"
]
"enum": ["inherit", "none"]
},
"minimumBoardPermission": {
"type": "string",
"enum": [
"view",
"modify",
"full"
]
"enum": ["view", "modify", "full"]
},
"trigger": {
"default": "manual",
"type": "string",
"enum": [
"load",
"manual"
]
"enum": ["load", "manual"]
},
"cacheTtlSeconds": {
"type": "integer",
@@ -312,10 +265,7 @@
"type": "boolean"
}
},
"required": [
"title",
"message"
],
"required": ["title", "message"],
"additionalProperties": false
},
"invalidates": {
@@ -379,11 +329,7 @@
"then": {},
"else": {}
},
"required": [
"type",
"properties",
"additionalProperties"
],
"required": ["type", "properties", "additionalProperties"],
"additionalProperties": false
},
"defaultOptions": {
@@ -399,15 +345,7 @@
"maxLength": 50000
}
},
"required": [
"$schema",
"name",
"sources",
"requests",
"optionsSchema",
"defaultOptions",
"template"
],
"required": ["$schema", "name", "sources", "requests", "optionsSchema", "defaultOptions", "template"],
"additionalProperties": false,
"$defs": {
"__schema0": {