@lieselthuriot/widget-renderer 0.1.0 → 0.2.0

package/README.md

@@ -1,244 +1,299 @@
-# Widget Renderer
-
-Reusable Angular components for rendering compact, grid-based widgets with text, imagery, actions, charts, progress indicators, loading states, and sensitive-content controls.
-
-The package is designed to receive a plain `WidgetContract` from an API or application. Consumers do not need to add editor-only element IDs or hydrate the data before rendering.
-
-- **Live editor:** [widget-studio.liesel.dev](https://widget-studio.liesel.dev). Design a widget and copy its JSON.
-- **Dashboard grid:** [`@lieselthuriot/widget-landscape`](https://www.npmjs.com/package/@lieselthuriot/widget-landscape)
-- **C# contracts:** [`WidgetStudio.Contracts`](https://www.nuget.org/packages/WidgetStudio.Contracts) produces JSON in the same format from .NET.
-
-## Installation
-
-```bash
-npm install @lieselthuriot/widget-renderer
-```
-
-`@angular/common`, `@angular/core`, and `echarts` are peer dependencies. The package supports Angular 21 and 22 and ECharts 6.x. npm, pnpm, and Bun install missing peer dependencies automatically; with Yarn, also add `echarts`.
-
-## Features
-
-- Render `mini`, `compact`, `tall`, `square`, `wide`, `mega`, `banner`, and `hero` widgets from a version 2 contract
-- Place elements with configurable rows, columns, spans, and anchors
-- Support text, images, buttons, dividers, pie, donut, funnel, gauge, bar, line, and progress elements
-- Render charts with ECharts using SVG output
-- Validate incoming data with structured paths and messages
-- Normalize optional contract fields such as button defaults and text padding
-- Blur sensitive backgrounds and elements until explicitly revealed
-- Emit refresh and button-action events without making network requests
-- Provide accessible names and text summaries for charts and progress bars
-- Respect reduced-motion preferences for loading and active progress animations
-- Localize renderer-owned accessible labels, with built-in German, French, and Dutch locales
-
-## Usage
-
-Import the standalone `WidgetRenderer` component into an Angular component and bind a `WidgetContract`:
-
-```ts
-import { Component } from '@angular/core';
-import { ButtonElement, WidgetContract, WidgetRenderer } from '@lieselthuriot/widget-renderer';
-
-@Component({
-  selector: 'app-dashboard-card',
-  imports: [WidgetRenderer],
-  template: `
-    <widget-renderer
-      [widget]="widget"
-      [darkMode]="darkMode"
-      [loading]="loading"
-      (refreshRequested)="refreshWidget()"
-      (actionRequested)="handleAction($event)"
-    />
-  `,
-})
-export class DashboardCard {
-  readonly darkMode = false;
-  readonly loading = false;
-
-  readonly widget: WidgetContract = {
-    version: 2,
-    id: 'hello-widget',
-    size: 'square',
-    rows: [{ unit: 'auto' }],
-    columns: [{ size: 1, unit: 'star' }],
-    background: {
-      color: '#172033',
-      sensitive: false,
-      repeat: false,
-      size: 'cover',
-      anchor: 'center',
-    },
-    refresh: { enabled: true, label: 'Refresh widget' },
-    elements: [
-      {
-        type: 'text',
-        grid: { row: 0, column: 0, rowSpan: 1, columnSpan: 1, anchor: 'center' },
-        sensitive: false,
-        text: 'Hello from Widget Renderer',
-        style: {
-          color: '#ffffff',
-          font: { size: 16, bold: true },
-          align: 'center',
-          wrap: true,
-        },
-      },
-    ],
-  };
-
-  refreshWidget(): void {
-    // Fetch updated data in the consuming application.
-  }
-
-  handleAction(event: { element: ButtonElement; event: Event }): void {
-    // Handle the configured button request in the consuming application.
-    console.log(event);
-  }
-}
-```
-
-> **Important:** `WidgetRenderer` emits `refreshRequested` and `actionRequested`. It does not call the configured button URL or perform refresh requests itself.
-
-### Loading state
-
-Set `loading` to `true` for the default square skeleton, or to a widget size such as `'wide'` for a matching skeleton:
-
-```html
-<widget-renderer [loading]="'wide'" [darkMode]="true" />
-```
-
-### Dark mode
-
-Pass `darkMode` to style the loading state for a dark surface. The rendered widget itself uses the colors provided by its contract, so applications can control the surrounding theme and widget palette independently.
-
-### Outputs
-
-`refreshRequested` is emitted when the refresh control is clicked. `actionRequested` is emitted with the clicked `ButtonElement` and DOM event:
-
-```ts
-import { ButtonElement } from '@lieselthuriot/widget-renderer';
-
-handleAction(event: { element: ButtonElement; event: Event }): void {
-  event.event.preventDefault();
-  const { method, url, body, requestRefresh } = event.element;
-  // Perform the application-specific request here.
-  console.log(method, url, body, requestRefresh);
-}
-```
-
-### Localization
-
-Renderer-owned accessible labels use English defaults and can be localized with the optional `locale` input. The input accepts partial nested overrides, so you can provide a complete locale or change only the values you need. Widget content, labels, image alternative text, refresh labels, and validation diagnostics remain consumer-provided.
-
-```ts
-import {
-  germanWidgetRendererLocale,
-  WidgetRendererLocaleOverrides,
-} from '@lieselthuriot/widget-renderer';
-
-readonly rendererLocale: WidgetRendererLocaleOverrides = {
-  ...germanWidgetRendererLocale,
-};
-```
-
-Built-in `germanWidgetRendererLocale`, `frenchWidgetRendererLocale`, and `dutchWidgetRendererLocale` values are available. For a small customization, override only the required values:
-
-```ts
-import { WidgetRendererLocaleOverrides } from '@lieselthuriot/widget-renderer';
-
-readonly rendererLocale: WidgetRendererLocaleOverrides = {
-  aria: {
-    showSensitiveData: 'Afficher les données privées',
-    chart: {
-      noDataSummary: (title) => `${title ? `${title} : ` : ''}aucune donnée.`,
-    },
-  },
-};
-```
-
-```html
-<widget-renderer [widget]="widget" [locale]="rendererLocale" />
-```
-
-The `aria` locale covers the loading status, toolbar, sensitive-content controls, image failure fallback, chart and progress accessible names, generated chart summaries, and progress segment labels. Locale changes update the rendered labels without changing widget-provided content.
-
-## Widget contract
-
-Every input must use `version: 2` and include:
-
-| Field        | Description                                                                                                                                          |
-| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `id`         | A stable identifier for the widget                                                                                                                   |
-| `size`       | `mini`, `compact`, `square`, `wide`, `mega`, `banner`, `hero`, or `tall`; dimensions include the 8px layout gap                                      |
-| `rows`       | Non-empty grid tracks using `pixel`, `auto`, or `star` units; `size` is required for `pixel` and `star` tracks and must be omitted for `auto` tracks |
-| `columns`    | Non-empty grid tracks using `pixel`, `auto`, or `star` units; `size` is required for `pixel` and `star` tracks and must be omitted for `auto` tracks |
-| `background` | Color, optional image, sizing, position, repeat, overlay, and sensitivity settings                                                                   |
-| `refresh`    | Whether to show a refresh action and its accessible label                                                                                            |
-| `elements`   | An array of supported widget elements                                                                                                                |
-
-Element positions are zero-based. For example, `row: 0` and `column: 0` place an element in the first grid cell.
-
-### Supported elements
-
-- `text`: formatted text with alignment, wrapping, font styling, color, background, radius, and padding
-- `image`: remote or local image with alternative text, fit mode, radius, and overlay color
-- `button`: `get` or `post` action metadata, optional body, solid or outline styling, and hover behavior
-- `divider`: horizontal or vertical separator
-- `pie`, `donut`, and `funnel`: labeled data points with optional legends and per-point colors
-- `gauge`: a value within a minimum and maximum range
-- `bar` and `line`: labeled series data with axis and line styling
-- `progress`: a range-based progress bar with label, suffix, legend, and active animation options
-
-Editor-only `id` fields are not required. The renderer accepts `WidgetContract` data and normalizes optional button fields and text padding before rendering.
-
-### Sensitive content
-
-Set `sensitive: true` on the background or an element to blur it and remove hidden content from the accessible tree. The renderer provides a local show/hide control when sensitive content is present.
-
-> **Warning:** Sensitive-content handling is a display and privacy feature, not encryption. Sensitive values remain in the JavaScript object supplied by the consuming application.
-
-## Validation and normalization
-
-Use the exported helpers when data enters your application:
-
-```ts
-import {
-  normalizeWidgetInput,
-  parseWidgetInput,
-  safeParseWidgetInput,
-} from '@lieselthuriot/widget-renderer';
-
-const result = safeParseWidgetInput(payload);
-
-if (!result.success) {
-  console.error(result.issues);
-} else {
-  const widget = normalizeWidgetInput(result.data);
-}
-
-// Throws WidgetValidationError when the payload is invalid.
-const parsed = parseWidgetInput(payload);
-```
-
-`WidgetValidationIssue` entries contain a `path` such as `elements[0].style.font.size` and a human-readable `message`. Invalid input supplied to `WidgetRenderer` produces a safe empty widget and exposes issues through `validationIssues`. `isWidgetContract` and `isWidget` are also available as type guards.
-
-## Public API
-
-Import everything from `@lieselthuriot/widget-renderer`; internal file paths are not part of the public API. The entry point exports:
-
-- `WidgetRenderer`, the standalone rendering component, and its `WidgetLoading` input type. Element and chart implementation components are internal.
-- Widget model types, including `WidgetContract`, `WidgetInput`, `Widget`, and the element types
-- `normalizeWidgetInput`
-- `safeParseWidgetInput`, `parseWidgetInput`, `isWidgetContract`, `isWidget`, `WidgetValidationError`, and the validation result types
-- Grid layout helpers and widget dimensions, such as `widgetWidth`, `widgetHeight`, `gridTemplate`, and `elementGridStyle`
-- Locales: `defaultWidgetRendererLocale`, `germanWidgetRendererLocale`, `frenchWidgetRendererLocale`, `dutchWidgetRendererLocale`, `WidgetRendererLocale`, and `WidgetRendererLocaleOverrides`
-- `chartAriaLabel` and `chartAccessibilitySummary`
-
-The complete export list is maintained in [`src/public-api.ts`](https://github.com/LieselThuriot/widget-studio/blob/main/projects/widget-renderer/src/public-api.ts).
-
-## Contributing
-
-The package is developed in the [widget-studio repository](https://github.com/LieselThuriot/widget-studio), together with the editor, the landscape package, and the C# contracts. See the repository README for build, test, and release instructions. Report problems in the [issue tracker](https://github.com/LieselThuriot/widget-studio/issues).
-
-## License
-
-[MIT](https://github.com/LieselThuriot/widget-studio/blob/main/LICENSE)
+# Widget Renderer
+
+Reusable Angular components for rendering compact, grid-based widgets with text, imagery, actions, charts, progress indicators, loading states, and sensitive-content controls.
+
+The package is designed to receive a plain `WidgetContract` from an API or application. Consumers do not need to add editor-only element IDs or hydrate the data before rendering.
+
+- **Live editor:** [widget-studio.liesel.dev](https://widget-studio.liesel.dev). Design a widget and copy its JSON.
+- **Dashboard grid:** [`@lieselthuriot/widget-landscape`](https://www.npmjs.com/package/@lieselthuriot/widget-landscape)
+- **C# contracts:** [`WidgetStudio.Contracts`](https://www.nuget.org/packages/WidgetStudio.Contracts) produces JSON in the same format from .NET.
+
+## Installation
+
+```bash
+npm install @lieselthuriot/widget-renderer
+```
+
+`@angular/common` and `@angular/core` are peer dependencies. The package supports Angular 21 and 22. Charts are drawn as SVG by the package itself, with [`d3-array`](https://www.npmjs.com/package/d3-array) and [`d3-shape`](https://www.npmjs.com/package/d3-shape) installed automatically as regular dependencies for the chart geometry.
+
+### Upgrading from 0.1
+
+Version 0.2 no longer uses ECharts. Remove `echarts` from your dependencies if nothing else in your application needs it. The widget contract is unchanged, but charts look slightly different:
+
+- Pie, donut, gauge, and funnel charts stack their title, chart, and legend, so the chart uses the available space and never overlaps the legend.
+- Bar and line axes, ticks, and labels are laid out by the renderer; crowded category labels are thinned out automatically.
+- Clicking a legend entry no longer hides the matching data point.
+- Every chart can be focused with the keyboard. Arrow keys, Home, and End move between data points, Escape hides the tooltip, and the selected point is announced to screen readers.
+- The keyboard focus ring can be themed with the `--widget-renderer-focus-ring` and `--widget-renderer-focus-ring-contrast` CSS custom properties.
+- Custom locales can set the new `dataPointLabel` and `gaugeValueLabel` chart entries; English values are used when they are omitted from overrides.
+
+## Features
+
+- Render `mini`, `compact`, `tall`, `square`, `wide`, `mega`, `banner`, and `hero` widgets from a version 2 contract
+- Place elements with configurable rows, columns, spans, and anchors
+- Support text, images, buttons, dividers, pie, donut, funnel, gauge, bar, line, and progress elements
+- Render charts as lightweight, keyboard-accessible SVG without a charting library
+- Validate incoming data with structured paths and messages
+- Normalize optional contract fields such as button defaults and text padding
+- Blur sensitive backgrounds and elements until explicitly revealed
+- Emit refresh and button-action events without making network requests
+- Provide accessible names and text summaries for charts and progress bars
+- Respect reduced-motion preferences for loading and active progress animations
+- Localize renderer-owned accessible labels, with built-in German, French, and Dutch locales
+
+## Usage
+
+Import the standalone `WidgetRenderer` component into an Angular component and bind a `WidgetContract`:
+
+```ts
+import { Component } from '@angular/core';
+import { ButtonElement, WidgetContract, WidgetRenderer } from '@lieselthuriot/widget-renderer';
+
+@Component({
+  selector: 'app-dashboard-card',
+  imports: [WidgetRenderer],
+  template: `
+    <widget-renderer
+      [widget]="widget"
+      [darkMode]="darkMode"
+      [loading]="loading"
+      (refreshRequested)="refreshWidget()"
+      (actionRequested)="handleAction($event)"
+    />
+  `,
+})
+export class DashboardCard {
+  readonly darkMode = false;
+  readonly loading = false;
+
+  readonly widget: WidgetContract = {
+    version: 2,
+    id: 'hello-widget',
+    size: 'square',
+    rows: [{ unit: 'auto' }],
+    columns: [{ size: 1, unit: 'star' }],
+    background: {
+      color: '#172033',
+      sensitive: false,
+      repeat: false,
+      size: 'cover',
+      anchor: 'center',
+    },
+    refresh: { enabled: true, label: 'Refresh widget' },
+    elements: [
+      {
+        type: 'text',
+        grid: { row: 0, column: 0, rowSpan: 1, columnSpan: 1, anchor: 'center' },
+        sensitive: false,
+        text: 'Hello from Widget Renderer',
+        style: {
+          color: '#ffffff',
+          font: { size: 16, bold: true },
+          align: 'center',
+          wrap: true,
+        },
+      },
+    ],
+  };
+
+  refreshWidget(): void {
+    // Fetch updated data in the consuming application.
+  }
+
+  handleAction(event: { element: ButtonElement; event: Event }): void {
+    // Handle the configured button request in the consuming application.
+    console.log(event);
+  }
+}
+```
+
+> **Important:** `WidgetRenderer` emits `refreshRequested` and `actionRequested`. It does not call the configured button URL or perform refresh requests itself.
+
+### Loading state
+
+Set `loading` to `true` for the default square skeleton, or to a widget size such as `'wide'` for a matching skeleton:
+
+```html
+<widget-renderer [loading]="'wide'" [darkMode]="true" />
+```
+
+### Dark mode
+
+Pass `darkMode` to style the loading state for a dark surface. The rendered widget itself uses the colors provided by its contract, so applications can control the surrounding theme and widget palette independently.
+
+### Outputs
+
+`refreshRequested` is emitted when the refresh control is clicked. `actionRequested` is emitted with the clicked `ButtonElement` and DOM event:
+
+```ts
+import { ButtonElement } from '@lieselthuriot/widget-renderer';
+
+handleAction(event: { element: ButtonElement; event: Event }): void {
+  event.event.preventDefault();
+  const { method, url, body, requestRefresh } = event.element;
+  // Perform the application-specific request here.
+  console.log(method, url, body, requestRefresh);
+}
+```
+
+### Localization
+
+Renderer-owned accessible labels use English defaults and can be localized with the optional `locale` input. The input accepts partial nested overrides, so you can provide a complete locale or change only the values you need. Widget content, labels, image alternative text, refresh labels, and validation diagnostics remain consumer-provided.
+
+```ts
+import {
+  germanWidgetRendererLocale,
+  WidgetRendererLocaleOverrides,
+} from '@lieselthuriot/widget-renderer';
+
+readonly rendererLocale: WidgetRendererLocaleOverrides = {
+  ...germanWidgetRendererLocale,
+};
+```
+
+Built-in `germanWidgetRendererLocale`, `frenchWidgetRendererLocale`, and `dutchWidgetRendererLocale` values are available. For a small customization, override only the required values:
+
+```ts
+import { WidgetRendererLocaleOverrides } from '@lieselthuriot/widget-renderer';
+
+readonly rendererLocale: WidgetRendererLocaleOverrides = {
+  aria: {
+    showSensitiveData: 'Afficher les données privées',
+    chart: {
+      noDataSummary: (title) => `${title ? `${title} : ` : ''}aucune donnée.`,
+    },
+  },
+};
+```
+
+```html
+<widget-renderer [widget]="widget" [locale]="rendererLocale" />
+```
+
+The `aria` locale covers the loading status, toolbar, sensitive-content controls, image failure fallback, chart and progress accessible names, generated chart summaries, chart data point announcements, and progress segment labels. Locale changes update the rendered labels without changing widget-provided content.
+
+## Widget contract
+
+Every input must use `version: 2` and include:
+
+| Field        | Description                                                                                                                                          |
+| ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `id`         | A stable identifier for the widget                                                                                                                   |
+| `size`       | `mini`, `compact`, `square`, `wide`, `mega`, `banner`, `hero`, or `tall`; dimensions include the 8px layout gap                                      |
+| `rows`       | Non-empty grid tracks using `pixel`, `auto`, or `star` units; `size` is required for `pixel` and `star` tracks and must be omitted for `auto` tracks |
+| `columns`    | Non-empty grid tracks using `pixel`, `auto`, or `star` units; `size` is required for `pixel` and `star` tracks and must be omitted for `auto` tracks |
+| `background` | Color, optional image, sizing, position, repeat, overlay, and sensitivity settings                                                                   |
+| `refresh`    | Whether to show a refresh action and its accessible label                                                                                            |
+| `elements`   | An array of supported widget elements                                                                                                                |
+
+Element positions are zero-based. For example, `row: 0` and `column: 0` place an element in the first grid cell.
+
+### Supported elements
+
+- `text`: formatted text with alignment, wrapping, font styling, color, background, radius, and padding
+- `image`: remote or local image with alternative text, fit mode, radius, and overlay color
+- `button`: `get` or `post` action metadata, optional body, solid or outline styling, and hover behavior
+- `divider`: horizontal or vertical separator
+- `pie`, `donut`, and `funnel`: labeled data points with optional legends and per-point colors
+- `gauge`: a value within a minimum and maximum range
+- `bar` and `line`: labeled series data with axis and line styling
+- `progress`: a range-based progress bar with label, suffix, legend, and active animation options
+
+Editor-only `id` fields are not required. The renderer accepts `WidgetContract` data and normalizes optional button fields and text padding before rendering.
+
+### Sensitive content
+
+Set `sensitive: true` on the background or an element to blur it and remove hidden content from the accessible tree. The renderer provides a local show/hide control when sensitive content is present.
+
+> **Warning:** Sensitive-content handling is a display and privacy feature, not encryption. Sensitive values remain in the JavaScript object supplied by the consuming application.
+
+## Validation and normalization
+
+Use the exported helpers when data enters your application:
+
+```ts
+import {
+  normalizeWidgetInput,
+  parseWidgetInput,
+  safeParseWidgetInput,
+} from '@lieselthuriot/widget-renderer';
+
+const result = safeParseWidgetInput(payload);
+
+if (!result.success) {
+  console.error(result.issues);
+} else {
+  const widget = normalizeWidgetInput(result.data);
+}
+
+// Throws WidgetValidationError when the payload is invalid.
+const parsed = parseWidgetInput(payload);
+```
+
+`WidgetValidationIssue` entries contain a `path` such as `elements[0].style.font.size` and a human-readable `message`. Invalid input supplied to `WidgetRenderer` produces a safe empty widget and exposes issues through `validationIssues`. `isWidgetContract` and `isWidget` are also available as type guards.
+
+### External validation rules
+
+Add your own checks with `validationRules`. Rules run only after the built-in validation passes and receive the typed widget. Each rule returns `WidgetValidationIssue` entries; return an empty array when the widget is allowed.
+
+```ts
+import { WidgetValidationRuleInput } from '@lieselthuriot/widget-renderer';
+
+const allowedColors = new Set(['#ffffff', '#1f2937']);
+
+export const rules: WidgetValidationRuleInput[] = [
+  // A plain function is a blocking rule.
+  (widget) =>
+    widget.background.image
+      ? [{ path: 'background.image', message: 'Background images are not allowed' }]
+      : [],
+  // Report-only rules let the widget render and only expose their issues.
+  {
+    mode: 'report',
+    validate: (widget) =>
+      widget.background.color && !allowedColors.has(widget.background.color.toLowerCase())
+        ? [{ path: 'background.color', message: 'Color is not allowed' }]
+        : [],
+  },
+];
+```
+
+```html
+<widget-renderer [widget]="widget" [validationRules]="rules" />
+```
+
+- `mode: 'block'` (the default): the renderer shows the safe empty widget and the validation overlay.
+- `mode: 'report'`: the widget renders normally; the issue is only exposed through `validationIssues`.
+- Rule issues get a `severity` of `block` or `report`. A rule that throws produces one issue with its own mode.
+- The same rules work outside the component: `safeParseWidgetInput(payload, { rules })` fails only on blocking issues and returns report-only issues in `result.issues`. `parseWidgetInput(payload, { rules })` throws only on blocking issues.
+
+## Layout fingerprints
+
+`computeWidgetFingerprint(payload)` returns a stable ID of the widget's look, such as `wfp:1:3f9c…`, or `null` for invalid input. Use it to approve a layout once and then accept any widget with the same fingerprint.
+
+The fingerprint covers the size, grid tracks, background (including its image), element types, positions, order, styles, image sources, and button method and behavior. It ignores content that can differ per visitor: the widget `id`, text, button labels, image alt text, chart titles, chart and progress data, button URLs and bodies, and the refresh label. Only whether text, labels, alt text, and titles are empty is included. Hex colors are compared case-insensitively, and omitted defaults match their explicit values.
+
+`WidgetStudio.Contracts` computes the same value with `WidgetFingerprint.Compute`, so a .NET backend can verify fingerprints itself. The version number after `wfp:` (`WIDGET_FINGERPRINT_VERSION`) changes whenever the rules change.
+
+## Public API
+
+Import everything from `@lieselthuriot/widget-renderer`; internal file paths are not part of the public API. The entry point exports:
+
+- `WidgetRenderer`, the standalone rendering component, and its `WidgetLoading` input type. Element and chart implementation components are internal.
+- Widget model types, including `WidgetContract`, `WidgetInput`, `Widget`, and the element types
+- `normalizeWidgetInput`
+- `safeParseWidgetInput`, `parseWidgetInput`, `isWidgetContract`, `isWidget`, `WidgetValidationError`, and the validation result types
+- `computeWidgetFingerprint` and `WIDGET_FINGERPRINT_VERSION`
+- Grid layout helpers and widget dimensions, such as `widgetWidth`, `widgetHeight`, `gridTemplate`, and `elementGridStyle`
+- Locales: `defaultWidgetRendererLocale`, `germanWidgetRendererLocale`, `frenchWidgetRendererLocale`, `dutchWidgetRendererLocale`, `WidgetRendererLocale`, and `WidgetRendererLocaleOverrides`
+- `chartAriaLabel` and `chartAccessibilitySummary`
+
+The complete export list is maintained in [`src/public-api.ts`](https://github.com/LieselThuriot/widget-studio/blob/main/projects/widget-renderer/src/public-api.ts).
+
+## Contributing
+
+The package is developed in the [widget-studio repository](https://github.com/LieselThuriot/widget-studio), together with the editor, the landscape package, and the C# contracts. See the repository README for build, test, and release instructions. Report problems in the [issue tracker](https://github.com/LieselThuriot/widget-studio/issues).
+
+## License
+
+[MIT](https://github.com/LieselThuriot/widget-studio/blob/main/LICENSE)