@protobase/cli 0.63.5 → 0.64.0

package/dist/cli/package.js

@@ -1,4 +1,4 @@
 //#region package.json
-var version = "0.63.5";
+var version = "0.64.0";
 //#endregion
 export { version };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@protobase/cli",
-  "version": "0.63.5",
+  "version": "0.64.0",
   "description": "The protobase command: scaffold, doctor, dev, build and serve a Protobase project.",
   "license": "Apache-2.0",
   "repository": {
@@ -42,12 +42,12 @@
   "dependencies": {
     "@better-auth/core": "^1.7.12",
     "@hono/node-server": "^2.1.3",
-    "@protobase/config": "0.63.5",
-    "@protobase/layout": "0.63.5",
-    "@protobase/query": "0.63.5",
-    "@protobase/schema": "0.63.5",
-    "@protobase/server": "0.63.5",
-    "@protobase/ui": "0.63.5",
+    "@protobase/config": "0.64.0",
+    "@protobase/layout": "0.64.0",
+    "@protobase/query": "0.64.0",
+    "@protobase/schema": "0.64.0",
+    "@protobase/server": "0.64.0",
+    "@protobase/ui": "0.64.0",
     "@react-email/render": "^2.1.0",
     "@scalar/hono-api-reference": "^0.12.10",
     "@tailwindcss/vite": "^4.3.3",

package/skills/protobase/references/features/lists.md

@@ -9,6 +9,7 @@ The list page of each resource, with its columns, filters, charts, search, expor
 - [Email, phone and web links](../reference/ui-config.md#names-and-columns): Fields marked as email, phone or URL show as links and are edited with the matching phone keyboard and browser autofill.
 - [Markdown and long text](../reference/ui-config.md#names-and-columns): Long text is edited in a box that grows with it. Markdown fields have Write and Preview and show rendered on the record page.
 - [Enum labels and colours](../reference/ui-config.md#names-and-columns): Enum values get readable labels and badge colours that show everywhere the value appears, and badges can be drawn as arrows, as on a rating scale.
+- [Value tones and currencies](../reference/ui-config.md#value-tones-and-currencies): An enum value's badge takes the tone or colour its view gives it, and a money field shows in the ISO 4217 currency its view names.
 - [Pinned title column](../reference/ui-config.md#names-and-columns): Columns size to their content, and on desktop the title column stays in place while the table scrolls sideways.
 - [Pinned columns](../reference/ui-config.md#names-and-columns): A column's menu pins it to the left edge of the table, and the browser keeps the pins for each list.
 - [Resizable columns](../reference/ui-config.md#names-and-columns): Dragging a table column header's right edge, or the arrow keys on it, makes that column wider or narrower, down to a usable minimum. The widths last until the page is left or reloaded.

package/skills/protobase/references/guides/billing-page.md

@@ -46,11 +46,11 @@ import type { billingProfiles, invoices, paymentMethods, plans, subscriptions }
 
 // The views of the billing schema: names, labels, and the named actions the billing page's buttons run.
 
-export const plansView = view<typeof plans>('plans').title((r) => r.name).nav({ hidden: true }).fields((r) => ({ price: r.price.prefix('€').decimals(2) }))
+export const plansView = view<typeof plans>('plans').title((r) => r.name).nav({ hidden: true }).fields((r) => ({ price: r.price.prefix('€').currency('EUR').decimals(2) }))
 
 export const subscriptionsView = view<typeof subscriptions>('subscriptions')
   .nav({ hidden: true })
-  .fields((r) => ({ renews_at: r.renews_at.label('Renews on'), status: r.status.valueLabels({ active: 'Active', canceled: 'Canceled' }) }))
+  .fields((r) => ({ renews_at: r.renews_at.label('Renews on'), status: r.status.valueLabels({ active: 'Active', canceled: 'Canceled' }).valueColors({ active: 'green' }) }))
   .actions((a) => [
     a.update('cancel', { label: 'Cancel plan', set: { status: 'canceled' }, confirm: 'Your plan stays active until the end of the period.' }),
     a.link('upgrade', { label: 'Upgrade', href: 'mailto:sales@example.com?subject=Upgrade%20from%20plan%20{plan}' }),
@@ -68,7 +68,7 @@ export const paymentMethodsView = view<typeof paymentMethods>('payment_methods')
 export const invoicesView = view<typeof invoices>('invoices')
   .title((r) => r.number)
   .names({ singular: 'Invoice', plural: 'Invoices' })
-  .fields((r) => ({ total: r.total.prefix('€').decimals(2), issued_at: r.issued_at.label('Date'), status: r.status.valueLabels({ open: 'Open', paid: 'Paid' }) }))
+  .fields((r) => ({ number: r.number.format('code'), total: r.total.prefix('€').currency('EUR').decimals(2), issued_at: r.issued_at.label('Date'), status: r.status.valueLabels({ open: 'Open', paid: 'Paid' }).valueColors({ paid: 'green' }) }))
   .list((r) => ({ columns: [r.number, r.issued_at, r.total, r.status] }))
   .actions((a) => [a.action('download', { label: 'Download PDF' })])
 ```

package/skills/protobase/references/guides/first-composed-page.md

@@ -132,9 +132,11 @@ export const ordersView = view<typeof orders>('orders')
     },
   })
   .fields((r) => ({
+    number: r.number.format('code'),
     status: r.status.help('Where the order is in its life. Moving it forward can notify the customer.').format('badge')
-      .valueLabels({ draft: 'Draft', confirmed: 'Confirmed', picking: 'Picking', shipped: 'Shipped', delivered: 'Delivered', cancelled: 'Cancelled' }),
-    total: r.total.help('Order total including VAT.').prefix('€').decimals(2),
+      .valueLabels({ draft: 'Draft', confirmed: 'Confirmed', picking: 'Picking', shipped: 'Shipped', delivered: 'Delivered', cancelled: 'Cancelled' })
+      .valueColors({ confirmed: 'blue', picking: 'amber', shipped: 'violet', delivered: 'green', cancelled: 'red' }),
+    total: r.total.help('Order total including VAT.').prefix('€').currency('EUR').decimals(2),
     discount_percent: r.discount_percent.label('Discount').help('Percentage taken off the order total.').format('percent'),
     paid: r.paid.help('Set when the payment has been received.'),
     created_at: r.created_at.label('Created').format('absolute'),

package/skills/protobase/references/guides/table-to-admin.md

@@ -95,7 +95,7 @@ export const repairsView = view<typeof repairs>('repairs')
     number: r.number.format('code'),
     customer_id: r.customer_id.label('Customer'),
     status: r.status.format('badge'),
-    estimate: r.estimate.prefix('€').decimals(2),
+    estimate: r.estimate.prefix('€').currency('EUR').decimals(2),
     booked_on: r.booked_on.label('Booked on'),
   }))
   .list((r) => ({

package/skills/protobase/references/reference/history.md

@@ -26,6 +26,7 @@ export const orders = resource('orders')
 
 export const ordersView = view<typeof orders>('orders')
   .title((r) => r.number)
+  .fields((r) => ({ number: r.number.format('code'), status: r.status.valueColors({ paid: 'green', shipped: 'violet', cancelled: 'red' }) }))
   .layout((r) => [
     l.section('Order', [r.number, r.status, r.total, r.iban]),
     // the last 10 changes, newest first, with Show more for the rest

package/skills/protobase/references/reference/ui-config.md

@@ -35,7 +35,7 @@ export const repairsView = view<typeof repairs>('repairs')
     number: r.number.format('code'),
     customer_id: r.customer_id.label('Customer'),
     status: r.status.format('badge'),
-    estimate: r.estimate.prefix('€').decimals(2),
+    estimate: r.estimate.prefix('€').currency('EUR').decimals(2),
     booked_on: r.booked_on.label('Booked on'),
   }))
   .list((r) => ({
@@ -98,17 +98,36 @@ Field hints:
 | `.label(text)` | Instead of the name in words (`customer_id` would be "Customer" anyway). |
 | `.help(text, { when? })` | A line under the field on the record page and in forms. `when: 'editing'` shows it only while the record is edited; see [Help while editing](#help-while-editing). |
 | `.confirm(question)` | Asks `question` before a person changes the value in a form or a list cell, and Cancel keeps it. See [Confirming a change](#confirming-a-change). |
-| `.format(format)` | `badge` shows statuses as coloured badges, `code` sets identifiers in monospace, `percent` adds a % sign. On a text field, `email`, `phone` and `url` show the value as a link that writes to it (`mailto:`), calls it (`tel:`, its digits and a leading +) or opens it in a new tab (only an `http` or `https` address; anything else stays text), on the record page, in its sidebar and in the list's cells but the title's, which links to the record; forms edit it in an email, phone or web address input, which brings up the keyboard for it on a mobile screen and offers the browser's autofill. Another field type with one of them stops the server at startup. `relative` on a timestamp shows it as "5 minutes ago" or "in 2 hours" in lists and on the record page, with the exact time on hover; `absolute` and `compact` are accepted and carried in `/meta` for apps that render their own lists. <gap>The admin does not use the `absolute` and `compact` formats yet.</gap> |
+| `.format(format)` | `badge` shows statuses as coloured badges, `code` sets identifiers in monospace, as the list's identifier column too, `percent` adds a % sign, and `signed` shows a whole number in a list with its sign, green above zero and red below, such as a stock change of `+12` or `−3`; it needs an integer field. On a text field, `email`, `phone` and `url` show the value as a link that writes to it (`mailto:`), calls it (`tel:`, its digits and a leading +) or opens it in a new tab (only an `http` or `https` address; anything else stays text), on the record page, in its sidebar and in the list's cells but the title's, which links to the record; forms edit it in an email, phone or web address input, which brings up the keyboard for it on a mobile screen and offers the browser's autofill. Another field type with one of them stops the server at startup. `relative` on a timestamp shows it as "5 minutes ago" or "in 2 hours" in lists and on the record page, with the exact time on hover; `absolute` and `compact` are accepted and carried in `/meta` for apps that render their own lists. <gap>The admin does not use the `absolute` and `compact` formats yet.</gap> |
 | `.multiline()` | A text of several lines, such as a description: forms edit it in a box that grows with the text, so the page scrolls rather than the box, and the record page's sections, a page's field blocks and a card's subtitle keep its line breaks (a card shows the first three lines); the record's sidebar shows it on one line. On the record page and the create form it takes the whole width of its section. Only a text field takes it; the list's table shows the text on one line. |
 | `.markdown()` | Markdown, such as a task's notes: forms edit its source in a box that grows with it, with a Write and Preview switch above it, and store it exactly as typed. The record page's sections and a page's field blocks show it rendered as GitHub does, line breaks kept; raw HTML shows as text, links and images keep only http(s), mailto, tel and relative addresses, and links open in a new tab. A card's subtitle shows its first three lines rendered, its links as text; the list's table, the record's sidebar and a card's other lines show its text on one line without the marks. On the record page and the create form it takes the whole width of its section. Only a text field takes it, and the renderer loads with the first markdown shown. |
-| `.prefix(text)`, `.suffix(text)`, `.decimals(n)` | Money and measures: `€` and `2` show `€1,234.50`, `.suffix(' m²')` shows `120 m²`. They show wherever the number does: records, cards, table cells, forms and the range filter. |
+| `.prefix(text)`, `.suffix(text)`, `.decimals(n)` | Text around a number and its decimals: `€` and `2` show `€1,234.50`, `.suffix(' m²')` shows `120 m²`. They show wherever the number does: records, cards, table cells, forms and the range filter. A prefix is plain text, so a list does not show `€` as money; `.currency()` does. |
+| `.currency(code)` | The currency a decimal is an amount of, as an ISO 4217 code such as `EUR`: the list shows it as money in that currency, in its table and its range filter. See [Value tones and currencies](#value-tones-and-currencies). |
 | `.icon(name)` | An icon before the value on a card's meta row: one of the names [actions](layouts.md#named-actions) take, such as `bed`, `calendar` or `cpu`, and above the value in a section of [key facts](#key-facts). Nowhere else shows it. |
 | `.valueLabels({ value: text })` | How an enum's values read: `r.method.valueLabels({ ideal: 'iDEAL' })`. Only the enum's values are accepted. A value without a label shows as stored (`direct_debit`), so label every value that should read as words. |
-| `.valueColors({ value: '#hex' })`, `.badgeShape('arrow')` | An enum's badges filled with a colour per value (the text turns white or black, whichever reads), and drawn as arrows pointing right, as on a rating scale. The property portal's energy label: `r.energy_label.format('badge').valueColors({ a: '#00a651', g: '#ed1c24' }).badgeShape('arrow')`. Only the enum's values are accepted. |
+| `.valueColors({ value: tone or '#hex' })`, `.badgeShape('arrow')` | An enum's badges in a tone per value, or filled with a colour (the text turns white or black, whichever reads), and drawn as arrows pointing right, as on a rating scale. See [Value tones and currencies](#value-tones-and-currencies). The property portal's energy label: `r.energy_label.format('badge').valueColors({ a: '#00a651', g: '#ed1c24' }).badgeShape('arrow')`. Only the enum's values are accepted. |
 | `.widget(name, props?)` | Shows and edits the field with a [field type](plugins.md#field-types) of the project or a plugin, such as `r.status.widget('steps')` or `r.score.widget('rating', { max: 5 })`, or with the built-in [`members`](plugins.md#members), which picks an organization's members into a JSON array of user ids; `props` are plain data. Without it, or on a storage type it does not show, the field shows as it would without the hint. |
 
 An enum's value labels show everywhere the admin shows its values: badges, select options, list and related-table cells, filter options and chips, record titles, the sidebar and search results. They are part of the view in `/api/meta`, so an app with its own screens can show them too, and [`enumLabel(value, labels)`](https://docs.protobase.net/api/schema/functions/enumlabel/) from `@protobase/schema` reads a value the same way. A label for a value the enum does not have stops the server at startup, so renaming a value cannot leave a stale label behind.
 
+### Value tones and currencies
+
+An enum value's badge takes the tone or colour its view gives it, and a money field shows in the ISO 4217 currency its view names. Nothing is read from the names of values or fields: a value the view gives no tone is `neutral`, and a decimal without a currency is a number.
+
+`.valueColors(...)` gives each value one of the badge tones, `neutral`, `blue`, `green`, `amber`, `red` or `violet`, or a hex colour that fills the badge. The tone shows on the value's badges in lists, boards and the record page, in the record page's heading and in a list's [related dots](#related-records-in-a-list); a hex colour colours a chart's group too. Anything else throws when the view is built.
+
+`.currency('EUR')` on a decimal field makes the list show it as money in that currency, with the currency's sign and grouping for the language, in the table and in its range filter. A currency on another field type stops the server at startup, as does `.format('signed')` on a field that is not an integer.
+
+```ts
+view<typeof orders>('orders').fields((r) => ({
+  number: r.number.format('code'),
+  status: r.status.valueColors({ confirmed: 'blue', shipped: 'violet', delivered: 'green', cancelled: 'red' }),
+  total: r.total.prefix('€').currency('EUR').decimals(2),
+}))
+```
+
+<gap>The record page, forms, cards, charts and exports cannot show a field in its currency because reading `.currency()` outside lists is not implemented.</gap> They show the field's `.prefix()`, so a money field takes both, as above.
+
 The table's columns take their width from the first rows it shows, and keep it while it scrolls, filters and sorts: the `.title` column gets the largest share, other text a share as long as its values, and short values such as enums, booleans, numbers, amounts and dates their own width whole. A value cut short shows whole when hovered. On a desktop the title column is pinned to the left by default, with the column before it when it is the second, so it stays in view when the table scrolls sideways; the column menu unpins it, and pins any other column to the left edge, and the choice is kept in the browser for that list. A column of the table is made wider or narrower by dragging its header's right edge, or with the left and right arrow keys on that edge, down to 64 pixels; the other columns keep their width, a drag never sorts, and the widths last until the page is left or reloaded. The row menu stays at the table's right edge as it scrolls sideways. Embedded lists and a page's `Table` blocks size their columns the same way.
 
 ### Related records in a list
@@ -128,7 +147,7 @@ view<typeof objectives>('objectives').list((r, d, c) => ({
 | Option | |
 | --- | --- |
 | `resource`, `field`, `through`, `filter` | Which records each row shows, as a [related section](#related-records) finds them: those whose relation `field` holds the row's key, or, through a join resource, those `through`'s records pick, so a task can serve several objectives. |
-| `status` | An enum field of `resource`. Each dot is filled with the colour its value has in the resource's view (`.valueColors(...)`), else in the value's badge tone. Required. |
+| `status` | An enum field of `resource`. Each dot is filled with the colour or tone its value has in the resource's view (`.valueColors(...)`), `neutral` without one. Required. |
 | `sort` | The dots' order, AIP-132 on `resource`. |
 | `label` | The column's header; default the name in words. The name must not be a field of the resource. |
 
@@ -211,6 +230,7 @@ export const productsView = view<typeof products>('products')
 
 export const invoicesView = view<typeof invoices>('invoices')
   .title((r) => r.number)
+  .fields((r) => ({ number: r.number.format('code') }))
   .layout((r) => [
     l.section('Invoice', [r.number, r.customer]),
     l.related('Items', { resource: 'invoice_items', field: 'invoice_id', sort: 'position' }),
@@ -904,7 +924,7 @@ export const unitsView = view<typeof units>('units')
     property_id: r.property_id.label('Property'),
     area_m2: r.area_m2.label('Area').help('Living area in m².').suffix(' m²'),
     energy_label: r.energy_label.format('badge'),
-    base_rent: r.base_rent.label('Market rent').help('What a new lease would ask today, per month.').prefix('€').decimals(2),
+    base_rent: r.base_rent.label('Market rent').help('What a new lease would ask today, per month.').prefix('€').currency('EUR').decimals(2),
     status: r.status.help('Let while a lease runs; vacant or under renovation between leases.').format('badge').valueLabels({ let: 'Let', vacant: 'Vacant', renovation: 'Renovation' }),
   }))
   .list((r) => ({ columns: [r.label, r.property_id, r.status, r.bedrooms, r.area_m2, r.energy_label, r.base_rent], search: [r.label] }))
@@ -1026,9 +1046,11 @@ export const ordersView = view<typeof orders>('orders')
     },
   })
   .fields((r) => ({
+    number: r.number.format('code'),
     status: r.status.help('Where the order is in its life. Moving it forward can notify the customer.').format('badge')
-      .valueLabels({ draft: 'Draft', confirmed: 'Confirmed', picking: 'Picking', shipped: 'Shipped', delivered: 'Delivered', cancelled: 'Cancelled' }),
-    total: r.total.help('Order total including VAT.').prefix('€').decimals(2),
+      .valueLabels({ draft: 'Draft', confirmed: 'Confirmed', picking: 'Picking', shipped: 'Shipped', delivered: 'Delivered', cancelled: 'Cancelled' })
+      .valueColors({ confirmed: 'blue', picking: 'amber', shipped: 'violet', delivered: 'green', cancelled: 'red' }),
+    total: r.total.help('Order total including VAT.').prefix('€').currency('EUR').decimals(2),
     discount_percent: r.discount_percent.label('Discount').help('Percentage taken off the order total.').format('percent'),
     paid: r.paid.help('Set when the payment has been received.'),
     created_at: r.created_at.label('Created').format('absolute'),