tinybase 8.4.2 → 8.5.0-beta.1

package/@types/ui-react-dom-charts/with-schemas/index.d.ts

@@ -0,0 +1,296 @@
+/**
+ * The ui-react-dom-charts module of the TinyBase project provides components
+ * to make it easy to create web-based reactive charts with Store and Queries
+ * objects.
+ *
+ * The components in this module use the react-dom module and so are not
+ * appropriate for environments like React Native (although those in the
+ * lower-level ui-react module are).
+ *
+ * For a full list of SVG class names that can be styled with CSS, see the
+ * Using Charts guide.
+ * @packageDocumentation
+ * @module ui-react-dom-charts
+ * @since v8.5.0
+ */
+import type {
+  CellIdFromSchema,
+  TableIdFromSchema,
+} from '../../_internal/store/with-schemas/index.d.ts';
+import type {ComponentReturnType} from '../../_internal/ui-react/with-schemas/index.d.ts';
+import type {
+  QueriesOrQueriesId,
+  StoreOrStoreId,
+} from '../../_internal/ui/with-schemas/index.d.ts';
+import type {Id} from '../../common/with-schemas/index.d.ts';
+import type {OptionalSchemas} from '../../store/with-schemas/index.d.ts';
+
+/**
+ * The ChartProps type describes the props that are used to configure the
+ * chart element that renders a chart.
+ * @category Configuration
+ * @since v8.5.0
+ */
+export type ChartProps = {
+  /**
+   * An optional string that will be used as the class attribute of the chart's
+   * SVG element. This can be used as the root selector for styling chart
+   * internals, as shown in the Using Charts guide.
+   * @category Prop
+   * @since v8.5.0
+   */
+  readonly className?: string;
+};
+
+/**
+ * The ChartTableSourceProps type describes the props that bind a chart to a
+ * Table in a Store.
+ * @category Configuration
+ * @since v8.5.0
+ */
+export type ChartTableSourceProps<
+  Schemas extends OptionalSchemas,
+  TableIds extends TableIdFromSchema<Schemas[0]> = TableIdFromSchema<
+    Schemas[0]
+  >,
+> = TableIds extends infer TableId
+  ? TableId extends TableIdFromSchema<Schemas[0]>
+    ? {
+        /**
+   * The Id of the Table in the Store to chart.
+   * @category Prop
+   * @since v8.5.0
+   */
+        readonly tableId: TableId;
+        /**
+   * The Store to chart, or the Id of a Store that is registered with the
+   * Provider component.
+   * @category Prop
+   * @since v8.5.0
+   */
+        readonly store?: StoreOrStoreId<Schemas>;
+        /**
+   * This prop is not used when binding a chart to a Table.
+   * @category Prop
+   * @since v8.5.0
+   */
+        readonly queryId?: never;
+        /**
+   * This prop is not used when binding a chart to a Table.
+   * @category Prop
+   * @since v8.5.0
+   */
+        readonly queries?: never;
+      }
+    : never
+  : never;
+
+/**
+ * The ChartQuerySourceProps type describes the props that bind a chart to a
+ * Query in a Queries object.
+ * @category Configuration
+ * @since v8.5.0
+ */
+export type ChartQuerySourceProps<Schemas extends OptionalSchemas> = {
+  /**
+   * The Id of the query in the Queries object to chart.
+   * @category Prop
+   * @since v8.5.0
+   */
+  readonly queryId: Id;
+  /**
+   * The Queries object to chart, or the Id of a Queries object that is
+   * registered with the Provider component.
+   * @category Prop
+   * @since v8.5.0
+   */
+  readonly queries?: QueriesOrQueriesId<Schemas>;
+  /**
+   * This prop is not used when binding a chart to a Query.
+   * @category Prop
+   * @since v8.5.0
+   */
+  readonly tableId?: never;
+  /**
+   * This prop is not used when binding a chart to a Query.
+   * @category Prop
+   * @since v8.5.0
+   */
+  readonly store?: never;
+};
+
+/**
+ * The ChartBindingProps type describes the props that bind a chart to Cell
+ * values in TinyBase data.
+ * @category Configuration
+ * @since v8.5.0
+ */
+export type ChartBindingProps<CellId extends Id = Id> = {
+  /**
+   * The Id of the Cell that provides each data point's x value.
+   * @category Prop
+   * @since v8.5.0
+   */
+  readonly xCellId: CellId;
+  /**
+   * The Id of the Cell that provides each data point's y value.
+   * @category Prop
+   * @since v8.5.0
+   */
+  readonly yCellId: CellId;
+  /**
+   * The Id of the Cell used to sort the charted rows.
+   * @category Prop
+   * @since v8.5.0
+   */
+  readonly sortCellId?: CellId;
+  /**
+   * Whether the charted rows should be sorted in descending order.
+   * @category Prop
+   * @since v8.5.0
+   */
+  readonly descending?: boolean;
+  /**
+   * The number of sorted rows to skip before charting.
+   * @category Prop
+   * @since v8.5.0
+   */
+  readonly offset?: number;
+  /**
+   * The maximum number of sorted rows to chart.
+   * @category Prop
+   * @since v8.5.0
+   */
+  readonly limit?: number;
+};
+
+type ChartTableBindingProps<
+  Schemas extends OptionalSchemas,
+  TableIds extends TableIdFromSchema<Schemas[0]> = TableIdFromSchema<
+    Schemas[0]
+  >,
+> = TableIds extends infer TableId
+  ? TableId extends TableIdFromSchema<Schemas[0]>
+    ? ChartTableSourceProps<Schemas, TableId> &
+        ChartBindingProps<CellIdFromSchema<Schemas[0], TableId>>
+    : never
+  : never;
+
+/**
+ * The WithSchemas type provides a version of this module that is typed with
+ * schemas.
+ * @category Development
+ * @since v8.5.0
+ */
+export type WithSchemas<Schemas extends OptionalSchemas> = {
+  /**
+ * The LineChart component renders a line chart from TinyBase data.
+ * @category Store components
+ * @since v8.5.0
+ * @example
+ * This example creates a Provider context into which a default Store is
+ * provided. The LineChart component then renders an SVG chart from Cells in the
+ * `pets` Table.
+ *
+ * This has schema-based typing. The following is a simplified representation:
+ *
+ * ```ts override
+ * LineChart(
+ *   props: (ChartTableSourceProps | ChartQuerySourceProps) &
+ *     ChartBindingProps &
+ *     ChartProps,
+ * ): ComponentReturnType;
+ * ```
+ *
+ * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createStore} from 'tinybase';
+ * import {Provider} from 'tinybase/ui-react';
+ * import {LineChart} from 'tinybase/ui-react-dom-charts';
+ *
+ * const App = ({store}) => (
+ *   <Provider store={store}>
+ *     <LineChart
+ *       tableId="pets"
+ *       xCellId="order"
+ *       yCellId="sold"
+ *       className="sales"
+ *     />
+ *   </Provider>
+ * );
+ *
+ * const store = createStore().setTable('pets', {
+ *   hamsters: {order: 1, sold: 12},
+ *   rabbits: {order: 2, sold: 9},
+ * });
+ * const app = document.createElement('div');
+ * createRoot(app).render(<App store={store} />); // !act
+ * console.log(app.firstChild?.nodeName.toLowerCase());
+ * // -> 'svg'
+ * console.log(app.firstChild?.getAttribute('class'));
+ * // -> 'sales'
+ * ```
+ */
+  LineChart: (
+    props:
+      | (ChartTableBindingProps<Schemas> & ChartProps)
+      | (ChartQuerySourceProps<Schemas> & ChartBindingProps & ChartProps),
+  ) => ComponentReturnType;
+
+  /**
+ * The BarChart component renders a bar chart from TinyBase data.
+ * @category Store components
+ * @since v8.5.0
+ * @example
+ * This example creates a Queries object and provides it through Provider
+ * context. The BarChart component then renders an SVG chart from Cells in the
+ * `bySpecies` query.
+ *
+ * This has schema-based typing. The following is a simplified representation:
+ *
+ * ```ts override
+ * BarChart(
+ *   props: (ChartTableSourceProps | ChartQuerySourceProps) &
+ *     ChartBindingProps &
+ *     ChartProps,
+ * ): ComponentReturnType;
+ * ```
+ *
+ * ```jsx
+ * import React from 'react';
+ * import {createRoot} from 'react-dom/client';
+ * import {createQueries, createStore} from 'tinybase';
+ * import {Provider} from 'tinybase/ui-react';
+ * import {BarChart} from 'tinybase/ui-react-dom-charts';
+ *
+ * const App = ({queries}) => (
+ *   <Provider queries={queries}>
+ *     <BarChart queryId="bySpecies" xCellId="species" yCellId="sold" />
+ *   </Provider>
+ * );
+ *
+ * const store = createStore().setTable('pets', {
+ *   hamsters: {species: 'hamster', sold: 12},
+ *   rabbits: {species: 'rabbit', sold: 9},
+ * });
+ * const queries = createQueries(store).setQueryDefinition(
+ *   'bySpecies',
+ *   'pets',
+ *   ({select}) => {
+ *     select('species');
+ *     select('sold');
+ *   },
+ * );
+ * const app = document.createElement('div');
+ * createRoot(app).render(<App queries={queries} />); // !act
+ * console.log(app.firstChild?.nodeName.toLowerCase());
+ * // -> 'svg'
+ * ```
+ */
+  BarChart: (
+    props:
+      | (ChartTableBindingProps<Schemas> & ChartProps)
+      | (ChartQuerySourceProps<Schemas> & ChartBindingProps & ChartProps),
+  ) => ComponentReturnType;
+};

package/@types/ui-react-inspector/index.d.ts

@@ -46,7 +46,7 @@ export type InspectorProps = {
  *
  * See the <Inspector /> (React) demo for this component in action:
  *
- * ![Inspector example](https://tinybase.org/shots/inspector-react-demo.png
+ * ![Inspector example](https://beta.tinybase.org/shots/inspector-react-demo.png
  * "Inspector example")
  *
  * The component displays a nub in the corner of the screen which you may then

package/@types/ui-react-inspector/with-schemas/index.d.ts

@@ -46,7 +46,7 @@ export type InspectorProps = {
  *
  * See the <Inspector /> (React) demo for this component in action:
  *
- * ![Inspector example](https://tinybase.org/shots/inspector-react-demo.png
+ * ![Inspector example](https://beta.tinybase.org/shots/inspector-react-demo.png
  * "Inspector example")
  *
  * The component displays a nub in the corner of the screen which you may then

package/@types/ui-solid-dom/index.d.ts

@@ -692,7 +692,7 @@ export type SortedTablePaginatorProps = {
  *
  * See the <TableInHtmlTable /> (Solid) demo for this component in action:
  *
- * ![TableInHtmlTable example](https://tinybase.org/shots/tableinhtmltable-solid-demo.png
+ * ![TableInHtmlTable example](https://beta.tinybase.org/shots/tableinhtmltable-solid-demo.png
  * "TableInHtmlTable example")
  *
  * The component's props identify which Table to render based on Table Id, and
@@ -836,7 +836,7 @@ export function TableInHtmlTable(
  * See the <SortedTableInHtmlTable /> (Solid) demo for this component in
  * action:
  *
- * ![SortedTableInHtmlTable example](https://tinybase.org/shots/sortedtableinhtmltable-solid-demo.png
+ * ![SortedTableInHtmlTable example](https://beta.tinybase.org/shots/sortedtableinhtmltable-solid-demo.png
  * "SortedTableInHtmlTable example")
  *
  * The component's props identify which Table to render based on Table Id, and
@@ -1007,7 +1007,7 @@ export function SortedTableInHtmlTable(
  *
  * See the <ValuesInHtmlTable /> (Solid) demo for this component in action:
  *
- * ![ValuesInHtmlTable example](https://tinybase.org/shots/valuesinhtmltable-solid-demo.png
+ * ![ValuesInHtmlTable example](https://beta.tinybase.org/shots/valuesinhtmltable-solid-demo.png
  * "ValuesInHtmlTable example")
  *
  * The component's props identify which Row to render based on Table Id, Row Id,
@@ -1136,7 +1136,7 @@ export function ValuesInHtmlTable(
  *
  * See the <SliceInHtmlTable /> (Solid) demo for this component in action:
  *
- * ![SliceInHtmlTable example](https://tinybase.org/shots/sliceinhtmltable-solid-demo.png
+ * ![SliceInHtmlTable example](https://beta.tinybase.org/shots/sliceinhtmltable-solid-demo.png
  * "SliceInHtmlTable example")
  *
  * The component's props identify which Slice to render based on Index Id, Slice
@@ -1292,7 +1292,7 @@ export function SliceInHtmlTable(
  * See the <RelationshipInHtmlTable /> (Solid) demo for this component in
  * action:
  *
- * ![RelationshipInHtmlTable example](https://tinybase.org/shots/relationshipinhtmltable-solid-demo.png
+ * ![RelationshipInHtmlTable example](https://beta.tinybase.org/shots/relationshipinhtmltable-solid-demo.png
  * "RelationshipInHtmlTable example")
  *
  * The component's props identify which Relationship to render based on
@@ -1466,7 +1466,7 @@ export function RelationshipInHtmlTable(
  * See the <ResultTableInHtmlTable /> (Solid) demo for this component in
  * action:
  *
- * ![ResultTableInHtmlTable example](https://tinybase.org/shots/resulttableinhtmltable-solid-demo.png
+ * ![ResultTableInHtmlTable example](https://beta.tinybase.org/shots/resulttableinhtmltable-solid-demo.png
  * "ResultTableInHtmlTable example")
  *
  * The component's props identify which ResultTable to render based on query Id,
@@ -1617,7 +1617,7 @@ export function ResultTableInHtmlTable(
  * See the <ResultSortedTableInHtmlTable /> (Solid) demo for this component in
  * action:
  *
- * ![ResultSortedTableInHtmlTable example](https://tinybase.org/shots/resultsortedtableinhtmltable-solid-demo.png
+ * ![ResultSortedTableInHtmlTable example](https://beta.tinybase.org/shots/resultsortedtableinhtmltable-solid-demo.png
  * "ResultSortedTableInHtmlTable example")
  *
  * The component's props identify which ResultTable to render based on query Id,
@@ -1789,7 +1789,7 @@ export function ResultSortedTableInHtmlTable(
  *
  * See the <EditableCellView /> (Solid) demo for this component in action:
  *
- * ![EditableCellView example](https://tinybase.org/shots/editablecellview-solid-demo.png
+ * ![EditableCellView example](https://beta.tinybase.org/shots/editablecellview-solid-demo.png
  * "EditableCellView example")
  *
  * The component's props identify which Cell to render based on Table Id, Row
@@ -1859,7 +1859,7 @@ export function EditableCellView(
  *
  * See the <EditableValueView /> (Solid) demo for this component in action:
  *
- * ![EditableValueView example](https://tinybase.org/shots/editablevalueview-solid-demo.png
+ * ![EditableValueView example](https://beta.tinybase.org/shots/editablevalueview-solid-demo.png
  * "EditableValueView example")
  *
  * The component's props identify which Value to render based on Table Id, Row
@@ -1929,7 +1929,7 @@ export function EditableValueView(
  * See the <SortedTableInHtmlTable /> (Solid) demo for this component in
  * action:
  *
- * ![SortedTablePaginator example](https://tinybase.org/shots/sortedtablepaginator-solid-demo.png
+ * ![SortedTablePaginator example](https://beta.tinybase.org/shots/sortedtablepaginator-solid-demo.png
  * "SortedTablePaginator example")
  *
  * The component displays 'previous' and 'next' buttons for paging through the

package/@types/ui-solid-dom/with-schemas/index.d.ts

@@ -672,7 +672,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *
  * See the <TableInHtmlTable /> (Solid) demo for this component in action:
  *
- * ![TableInHtmlTable example](https://tinybase.org/shots/tableinhtmltable-solid-demo.png
+ * ![TableInHtmlTable example](https://beta.tinybase.org/shots/tableinhtmltable-solid-demo.png
  * "TableInHtmlTable example")
  *
  * The component's props identify which Table to render based on Table Id, and
@@ -824,7 +824,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * See the <SortedTableInHtmlTable /> (Solid) demo for this component in
  * action:
  *
- * ![SortedTableInHtmlTable example](https://tinybase.org/shots/sortedtableinhtmltable-solid-demo.png
+ * ![SortedTableInHtmlTable example](https://beta.tinybase.org/shots/sortedtableinhtmltable-solid-demo.png
  * "SortedTableInHtmlTable example")
  *
  * The component's props identify which Table to render based on Table Id, and
@@ -1003,7 +1003,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *
  * See the <ValuesInHtmlTable /> (Solid) demo for this component in action:
  *
- * ![ValuesInHtmlTable example](https://tinybase.org/shots/valuesinhtmltable-solid-demo.png
+ * ![ValuesInHtmlTable example](https://beta.tinybase.org/shots/valuesinhtmltable-solid-demo.png
  * "ValuesInHtmlTable example")
  *
  * The component's props identify which Row to render based on Table Id, Row Id,
@@ -1140,7 +1140,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *
  * See the <SliceInHtmlTable /> (Solid) demo for this component in action:
  *
- * ![SliceInHtmlTable example](https://tinybase.org/shots/sliceinhtmltable-solid-demo.png
+ * ![SliceInHtmlTable example](https://beta.tinybase.org/shots/sliceinhtmltable-solid-demo.png
  * "SliceInHtmlTable example")
  *
  * The component's props identify which Slice to render based on Index Id, Slice
@@ -1304,7 +1304,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * See the <RelationshipInHtmlTable /> (Solid) demo for this component in
  * action:
  *
- * ![RelationshipInHtmlTable example](https://tinybase.org/shots/relationshipinhtmltable-solid-demo.png
+ * ![RelationshipInHtmlTable example](https://beta.tinybase.org/shots/relationshipinhtmltable-solid-demo.png
  * "RelationshipInHtmlTable example")
  *
  * The component's props identify which Relationship to render based on
@@ -1486,7 +1486,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * See the <ResultTableInHtmlTable /> (Solid) demo for this component in
  * action:
  *
- * ![ResultTableInHtmlTable example](https://tinybase.org/shots/resulttableinhtmltable-solid-demo.png
+ * ![ResultTableInHtmlTable example](https://beta.tinybase.org/shots/resulttableinhtmltable-solid-demo.png
  * "ResultTableInHtmlTable example")
  *
  * The component's props identify which ResultTable to render based on query Id,
@@ -1645,7 +1645,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * See the <ResultSortedTableInHtmlTable /> (Solid) demo for this component in
  * action:
  *
- * ![ResultSortedTableInHtmlTable example](https://tinybase.org/shots/resultsortedtableinhtmltable-solid-demo.png
+ * ![ResultSortedTableInHtmlTable example](https://beta.tinybase.org/shots/resultsortedtableinhtmltable-solid-demo.png
  * "ResultSortedTableInHtmlTable example")
  *
  * The component's props identify which ResultTable to render based on query Id,
@@ -1825,7 +1825,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *
  * See the <EditableCellView /> (Solid) demo for this component in action:
  *
- * ![EditableCellView example](https://tinybase.org/shots/editablecellview-solid-demo.png
+ * ![EditableCellView example](https://beta.tinybase.org/shots/editablecellview-solid-demo.png
  * "EditableCellView example")
  *
  * The component's props identify which Cell to render based on Table Id, Row
@@ -1909,7 +1909,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  *
  * See the <EditableValueView /> (Solid) demo for this component in action:
  *
- * ![EditableValueView example](https://tinybase.org/shots/editablevalueview-solid-demo.png
+ * ![EditableValueView example](https://beta.tinybase.org/shots/editablevalueview-solid-demo.png
  * "EditableValueView example")
  *
  * The component's props identify which Value to render based on Table Id, Row
@@ -1979,7 +1979,7 @@ export type WithSchemas<Schemas extends OptionalSchemas> = {
  * See the <SortedTableInHtmlTable /> (Solid) demo for this component in
  * action:
  *
- * ![SortedTablePaginator example](https://tinybase.org/shots/sortedtablepaginator-solid-demo.png
+ * ![SortedTablePaginator example](https://beta.tinybase.org/shots/sortedtablepaginator-solid-demo.png
  * "SortedTablePaginator example")
  *
  * The component displays 'previous' and 'next' buttons for paging through the

package/@types/ui-solid-inspector/index.d.ts

@@ -46,7 +46,7 @@ export type InspectorProps = {
  *
  * See the <Inspector /> (Solid) demo for this component in action:
  *
- * ![Inspector example](https://tinybase.org/shots/inspector-solid-demo.png
+ * ![Inspector example](https://beta.tinybase.org/shots/inspector-solid-demo.png
  * "Inspector example")
  *
  * The component displays a nub in the corner of the screen which you may then

package/@types/ui-solid-inspector/with-schemas/index.d.ts

@@ -46,7 +46,7 @@ export type InspectorProps = {
  *
  * See the <Inspector /> (Solid) demo for this component in action:
  *
- * ![Inspector example](https://tinybase.org/shots/inspector-solid-demo.png
+ * ![Inspector example](https://beta.tinybase.org/shots/inspector-solid-demo.png
  * "Inspector example")
  *
  * The component displays a nub in the corner of the screen which you may then

package/@types/ui-svelte-dom/index.d.ts

@@ -690,7 +690,7 @@ export type SortedTablePaginatorProps = {
  *
  * See the <TableInHtmlTable /> (Svelte) demo for this component in action:
  *
- * ![TableInHtmlTable example](https://tinybase.org/shots/tableinhtmltable-svelte-demo.png
+ * ![TableInHtmlTable example](https://beta.tinybase.org/shots/tableinhtmltable-svelte-demo.png
  * "TableInHtmlTable example")
  *
  * The component's props identify which Table to render based on Table Id, and
@@ -854,7 +854,7 @@ export const TableInHtmlTable: Component<
  * See the <SortedTableInHtmlTable /> (Svelte) demo for this component in
  * action:
  *
- * ![SortedTableInHtmlTable example](https://tinybase.org/shots/sortedtableinhtmltable-svelte-demo.png
+ * ![SortedTableInHtmlTable example](https://beta.tinybase.org/shots/sortedtableinhtmltable-svelte-demo.png
  * "SortedTableInHtmlTable example")
  *
  * The component's props identify which Table to render based on Table Id, and
@@ -1042,7 +1042,7 @@ export const SortedTableInHtmlTable: Component<
  *
  * See the <ValuesInHtmlTable /> (Svelte) demo for this component in action:
  *
- * ![ValuesInHtmlTable example](https://tinybase.org/shots/valuesinhtmltable-svelte-demo.png
+ * ![ValuesInHtmlTable example](https://beta.tinybase.org/shots/valuesinhtmltable-svelte-demo.png
  * "ValuesInHtmlTable example")
  *
  * The component's props identify which Row to render based on Table Id, Row Id,
@@ -1185,7 +1185,7 @@ export const ValuesInHtmlTable: Component<
  *
  * See the <SliceInHtmlTable /> (Svelte) demo for this component in action:
  *
- * ![SliceInHtmlTable example](https://tinybase.org/shots/sliceinhtmltable-svelte-demo.png
+ * ![SliceInHtmlTable example](https://beta.tinybase.org/shots/sliceinhtmltable-svelte-demo.png
  * "SliceInHtmlTable example")
  *
  * The component's props identify which Slice to render based on Index Id, Slice
@@ -1357,7 +1357,7 @@ export const SliceInHtmlTable: Component<
  * See the <RelationshipInHtmlTable /> (Svelte) demo for this component in
  * action:
  *
- * ![RelationshipInHtmlTable example](https://tinybase.org/shots/relationshipinhtmltable-svelte-demo.png
+ * ![RelationshipInHtmlTable example](https://beta.tinybase.org/shots/relationshipinhtmltable-svelte-demo.png
  * "RelationshipInHtmlTable example")
  *
  * The component's props identify which Relationship to render based on
@@ -1544,7 +1544,7 @@ export const RelationshipInHtmlTable: Component<
  * See the <ResultTableInHtmlTable /> (Svelte) demo for this component in
  * action:
  *
- * ![ResultTableInHtmlTable example](https://tinybase.org/shots/resulttableinhtmltable-svelte-demo.png
+ * ![ResultTableInHtmlTable example](https://beta.tinybase.org/shots/resulttableinhtmltable-svelte-demo.png
  * "ResultTableInHtmlTable example")
  *
  * The component's props identify which ResultTable to render based on query Id,
@@ -1713,7 +1713,7 @@ export const ResultTableInHtmlTable: Component<
  * See the <ResultSortedTableInHtmlTable /> (Svelte) demo for this component in
  * action:
  *
- * ![ResultSortedTableInHtmlTable example](https://tinybase.org/shots/resultsortedtableinhtmltable-svelte-demo.png
+ * ![ResultSortedTableInHtmlTable example](https://beta.tinybase.org/shots/resultsortedtableinhtmltable-svelte-demo.png
  * "ResultSortedTableInHtmlTable example")
  *
  * The component's props identify which ResultTable to render based on query Id,
@@ -1902,7 +1902,7 @@ export const ResultSortedTableInHtmlTable: Component<
  *
  * See the <EditableCellView /> (Svelte) demo for this component in action:
  *
- * ![EditableCellView example](https://tinybase.org/shots/editablecellview-svelte-demo.png
+ * ![EditableCellView example](https://beta.tinybase.org/shots/editablecellview-svelte-demo.png
  * "EditableCellView example")
  *
  * The component's props identify which Cell to render based on Table Id, Row
@@ -1975,7 +1975,7 @@ export const EditableCellView: Component<
  *
  * See the <EditableValueView /> (Svelte) demo for this component in action:
  *
- * ![EditableValueView example](https://tinybase.org/shots/editablevalueview-svelte-demo.png
+ * ![EditableValueView example](https://beta.tinybase.org/shots/editablevalueview-svelte-demo.png
  * "EditableValueView example")
  *
  * The component's props identify which Value to render based on Table Id, Row
@@ -2050,7 +2050,7 @@ export const EditableValueView: Component<
  * See the <SortedTableInHtmlTable /> (Svelte) demo for this component in
  * action:
  *
- * ![SortedTablePaginator example](https://tinybase.org/shots/sortedtablepaginator-svelte-demo.png
+ * ![SortedTablePaginator example](https://beta.tinybase.org/shots/sortedtablepaginator-svelte-demo.png
  * "SortedTablePaginator example")
  *
  * The component displays 'previous' and 'next' buttons for paging through the