@scattered-light/loomiere-mojave 0.24.1 → 0.41.0

package/dist/exports/design-system/components/MultiSelect/README.md

@@ -12,10 +12,16 @@ Base UI docs: https://base-ui.com/react/components/multi-select
 |---|---|
 | `MultiSelectPopup` |   |
 | `MultiSelectList` |   |
-| `MultiSelectOption` |   |
+| `MultiSelectOption` | `data-disabled` |
 | `MultiSelectOptionLabel` |   |
+| `MultiSelectOptionHint` |   |
 | `MultiSelectOptionCount` |   |
 | `MultiSelectFooter` |   |
+| `MultiSelectField` | `data-disabled` |
+| `MultiSelectTrigger` |   |
+| `MultiSelectFieldLabel` |   |
+| `MultiSelectFind` |   |
+| `MultiSelectGroupLabel` |   |
 
 Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
 
@@ -32,4 +38,4 @@ export const Default: Story = {
 };
 ```
 
-The preview also shows `WithSelection`, `ManySelected`.
+The preview also shows `WithSelection`, `ManySelected`, `LabelAbove`.

package/dist/exports/design-system/components/MultiSelect/preview.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" height=360 subtitle="Default / WithSelection / ManySelected" -->
+<!-- @dsCard group="Components" height=480 subtitle="Default / WithSelection / ManySelected / LabelAbove" -->
 <!doctype html>
 <html>
 <head>
@@ -12,7 +12,7 @@
 <body>
 <div id="root"></div>
 <script>
-(()=>{var x=Object.create;var i=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,M=Object.prototype.hasOwnProperty;var d=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),V=(e,t)=>{for(var a in t)i(e,a,{get:t[a],enumerable:!0})},C=(e,t,a,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of A(t))!M.call(e,n)&&n!==a&&i(e,n,{get:()=>t[n],enumerable:!(o=w(t,n))||o.enumerable});return e};var y=(e,t,a)=>(a=e!=null?x(h(e)):{},C(t||!e||!e.__esModule?i(a,"default",{value:e,enumerable:!0}):a,e));var f=d((W,S)=>{S.exports=window.React});var b=d(($,v)=>{v.exports=window.Loomiere});var p={};V(p,{Default:()=>j,ManySelected:()=>I,WithSelection:()=>D,default:()=>m});var u=y(f(),1),r=y(b(),1);var l=window.React;function c(e,t,a){let{children:o,...n}=t||{};return a!==void 0&&(n.key=a),o===void 0?l.createElement(e,n):Array.isArray(o)?l.createElement(e,n,...o):l.createElement(e,n,o)}var q=l.Fragment;var L={title:"Components/Lib/MultiSelect",component:r.MultiSelect,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],args:{label:"Status",options:[],value:[],onValueChange:()=>{}}},m=L,g=[{value:"active",label:"Active",count:41},{value:"inactive",label:"Inactive",count:6},{value:"available",label:"Available from master",count:12}],j={render:function(){let[t,a]=u.useState([]);return c(r.MultiSelect,{label:"Status",allLabel:"All statuses",options:g,value:t,onValueChange:a})}},D={render:function(){let[t,a]=u.useState(["active","inactive"]);return c(r.MultiSelect,{label:"Status",allLabel:"All statuses",options:g,value:t,onValueChange:a})}},I={render:function(){let t=["Assets","Liabilities","Equity","Income","Cost of sales","Expenses"].map((n,R)=>({value:n,label:n,count:3+R})),[a,o]=u.useState(["Assets","Income","Expenses"]);return c(r.MultiSelect,{label:"Type",allLabel:"All types",options:t,value:a,onValueChange:o})}};var s=window.React,E=m||{},F=["Default","WithSelection","ManySelected"];function N({id:e}){let t=p[e],a={...E.args||{},...t.args||{}};return(t.render||(n=>s.createElement(E.component,n)))(a,{args:a,id:e,name:e})}var O=F.map(e=>s.createElement("section",{key:e,className:"ds-story"},s.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),s.createElement("div",{className:"ds-story-body"},s.createElement(N,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(s.createElement(s.Fragment,null,O));})();
+(()=>{var F=Object.create;var m=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty;var b=(t,e)=>()=>(e||t((e={exports:{}}).exports,e),e.exports),C=(t,e)=>{for(var n in e)m(t,n,{get:e[n],enumerable:!0})},V=(t,e,n,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of L(e))!x.call(t,a)&&a!==n&&m(t,a,{get:()=>e[a],enumerable:!(o=A(e,a))||o.enumerable});return t};var v=(t,e,n)=>(n=t!=null?F(h(t)):{},V(e||!t||!t.__esModule?m(n,"default",{value:t,enumerable:!0}):n,t));var g=b((T,y)=>{y.exports=window.React});var R=b((W,S)=>{S.exports=window.Loomiere});var p={};C(p,{CountedWithFind:()=>j,Default:()=>M,DisabledOptions:()=>P,LabelAbove:()=>N,ManySelected:()=>H,WithSelection:()=>D,default:()=>d});var r=v(g(),1),l=v(R(),1);var u=window.React;function s(t,e,n){let{children:o,...a}=e||{};return n!==void 0&&(a.key=n),o===void 0?u.createElement(t,a):Array.isArray(o)?u.createElement(t,a,...o):u.createElement(t,a,o)}var $=u.Fragment;var w={title:"Components/Lib/MultiSelect",component:l.MultiSelect,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],args:{label:"Status",options:[],value:[],onValueChange:()=>{}}},d=w,f=[{value:"active",label:"Active",count:41},{value:"inactive",label:"Inactive",count:6},{value:"available",label:"Available from master",count:12}],M={render:function(){let[e,n]=r.useState([]);return s(l.MultiSelect,{label:"Status",allLabel:"All statuses",options:f,value:e,onValueChange:n})}},D={render:function(){let[e,n]=r.useState(["active","inactive"]);return s(l.MultiSelect,{label:"Status",allLabel:"All statuses",options:f,value:e,onValueChange:n})}},H={render:function(){let e=["Assets","Liabilities","Equity","Income","Cost of sales","Expenses"].map((a,c)=>({value:a,label:a,count:3+c})),[n,o]=r.useState(["Assets","Income","Expenses"]);return s(l.MultiSelect,{label:"Type",allLabel:"All types",options:e,value:n,onValueChange:o})}},N={render:function(){let[e,n]=r.useState([]),o=["1000 Bank","1500 Equipment","2000 Accounts Payable","4000 Revenue","6100 Rent"].map(a=>({value:a,label:a}));return s(l.MultiSelect,{label:"Accounts",labelPlacement:"above",allLabel:"All accounts",options:o,value:e,onValueChange:n})}},P={render:function(){let[e,n]=r.useState(["a"]);return s(l.MultiSelect,{label:"Entities",allLabel:"All Entities",options:[{value:"a",label:"Fictional Personal Holdings",count:3},{value:"b",label:"Fictional Retirement Holdings",count:1},{value:"c",label:"Fictional Family Trust",disabled:!0,hint:"No investments"}],value:e,onValueChange:n})}},j={render:function(){let[e,n]=r.useState(["a"]),o=["Fictional Personal Holdings","Fictional Design LLC","Fictional Family Trust","Fictional Rentals LLC","Fictional Retirement Holdings","Fictional Roth","Fictional Bakery Co.","Fictional Dental Group","Fictional Holdings Co."].map((a,c)=>({value:c===0?"a":`o${c}`,label:a,...c===1?{disabled:!0,hint:"No investments"}:{}}));return s(l.MultiSelect,{label:"Entities",labelPlacement:"above",noun:"Entities",findLabel:"Find an Entity",allLabel:"All Entities",options:o,value:e,onValueChange:n})}};var i=window.React,E=d||{},k=["Default","WithSelection","ManySelected","LabelAbove"];function I({id:t}){let e=p[t],n={...E.args||{},...e.args||{}};return(e.render||(a=>i.createElement(E.component,a)))(n,{args:n,id:t,name:t})}var O=k.map(t=>i.createElement("section",{key:t,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(I,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,O));})();
 
 </script>
 </body>

package/dist/exports/design-system/components/Notice/README.md

@@ -10,7 +10,11 @@ Base UI docs: https://base-ui.com/react/components/notice
 
 | Class | Data attributes it answers to |
 |---|---|
-| `Notice` | `data-status`: `error`, `warning`, `success`, `info`; `data-technical` |
+| `Notice` | `data-status`: `error`, `warning`, `success`, `info`; `data-technical`; `data-layout`: `row` |
+| `NoticeTag` |   |
+| `NoticeBody` |   |
+| `NoticeHeading` |   |
+| `NoticeAction` |   |
 
 Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
 
@@ -27,4 +31,4 @@ export const Default: Story = {
 /** Every status, the neutral notice, and the technical style. */
 ```
 
-The preview also shows `Statuses`, `InAForm`.
+The preview also shows `Statuses`, `InAForm`, `WithHeadingAndAction`.

package/dist/exports/design-system/components/Notice/preview.html

@@ -1,4 +1,4 @@
-<!-- @dsCard group="Components" height=360 subtitle="Default / Statuses / InAForm" -->
+<!-- @dsCard group="Components" height=480 subtitle="Default / Statuses / InAForm / WithHeadingAndAction" -->
 <!doctype html>
 <html>
 <head>
@@ -12,7 +12,7 @@
 <body>
 <div id="root"></div>
 <script>
-(()=>{var f=Object.create;var l=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var b=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var x=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),E=(e,t)=>{for(var n in t)l(e,n,{get:t[n],enumerable:!0})},N=(e,t,n,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of g(t))!w.call(e,r)&&r!==n&&l(e,r,{get:()=>t[r],enumerable:!(s=h(t,r))||s.enumerable});return e};var S=(e,t,n)=>(n=e!=null?f(b(e)):{},N(t||!e||!e.__esModule?l(n,"default",{value:e,enumerable:!0}):n,e));var p=x((L,u)=>{u.exports=window.Loomiere});var d={};E(d,{Default:()=>F,InAForm:()=>k,Statuses:()=>R,default:()=>m});var o=S(p(),1);var i=window.React;function a(e,t,n){let{children:s,...r}=t||{};return n!==void 0&&(r.key=n),s===void 0?i.createElement(e,r):Array.isArray(s)?i.createElement(e,r,...s):i.createElement(e,r,s)}var B=i.Fragment;var v={title:"Components/Lib/Notice",component:o.Notice,parameters:{layout:"padded"},tags:["autodocs","ds:lib"]},m=v,F={args:{status:"error",children:"Email or password is incorrect, or the account is temporarily locked."},render:e=>a(o.Notice,{...e,style:{maxWidth:420}})},R={render:()=>a("div",{style:{display:"grid",gap:"var(--sl-space-3)",maxWidth:420},children:[a(o.Notice,{announce:!1,children:"Neutral: a note about this page."}),a(o.Notice,{status:"info",announce:!1,children:"Info: the import runs overnight."}),a(o.Notice,{status:"success",announce:!1,children:"If that email has an account, we've sent a link to it."}),a(o.Notice,{status:"warning",announce:!1,children:"Two accounts have no opening balance."}),a(o.Notice,{status:"error",announce:!1,children:"Can't reach the server. Check the connection and try again."}),a(o.Notice,{technical:!0,announce:!1,children:"This computer's keychain is unavailable: access denied by the system"})]})},k={render:()=>a("form",{style:{display:"grid",gap:"var(--sl-space-3)",maxWidth:360},onSubmit:e=>e.preventDefault(),children:[a(o.Field.Root,{children:[a(o.Field.Label,{children:"Email"}),a(o.Input,{type:"email",defaultValue:"jordan@example.com"})]}),a(o.Button,{type:"submit",children:"Sign in"}),a(o.Notice,{status:"error",announce:!1,children:"Enter your password"})]})};var c=window.React,y=m||{},I=["Default","Statuses","InAForm"];function j({id:e}){let t=d[e],n={...y.args||{},...t.args||{}};return(t.render||(r=>c.createElement(y.component,r)))(n,{args:n,id:e,name:e})}var A=I.map(e=>c.createElement("section",{key:e,className:"ds-story"},c.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),c.createElement("div",{className:"ds-story-body"},c.createElement(j,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(c.createElement(c.Fragment,null,A));})();
+(()=>{var y=Object.create;var l=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var v=Object.getPrototypeOf,b=Object.prototype.hasOwnProperty;var w=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),x=(e,n)=>{for(var o in n)l(e,o,{get:n[o],enumerable:!0})},N=(e,n,o,r)=>{if(n&&typeof n=="object"||typeof n=="function")for(let s of g(n))!b.call(e,s)&&s!==o&&l(e,s,{get:()=>n[s],enumerable:!(r=f(n,s))||r.enumerable});return e};var S=(e,n,o)=>(o=e!=null?y(v(e)):{},N(n||!e||!e.__esModule?l(o,"default",{value:e,enumerable:!0}):o,e));var p=w((j,u)=>{u.exports=window.Loomiere});var m={};x(m,{Default:()=>R,InAForm:()=>F,Statuses:()=>A,WithHeadingAndAction:()=>B,default:()=>d});var a=S(p(),1);var i=window.React;function t(e,n,o){let{children:r,...s}=n||{};return o!==void 0&&(s.key=o),r===void 0?i.createElement(e,s):Array.isArray(r)?i.createElement(e,s,...r):i.createElement(e,s,r)}var L=i.Fragment;var E={title:"Components/Lib/Notice",component:a.Notice,parameters:{layout:"padded"},tags:["autodocs","ds:lib"]},d=E,R={args:{status:"error",children:"Email or password is incorrect, or the account is temporarily locked."},render:e=>t(a.Notice,{...e,style:{maxWidth:420}})},A={render:()=>t("div",{style:{display:"grid",gap:"var(--sl-space-3)",maxWidth:420},children:[t(a.Notice,{announce:!1,children:"Neutral: a note about this page."}),t(a.Notice,{status:"info",announce:!1,children:"Info: the import runs overnight."}),t(a.Notice,{status:"success",announce:!1,children:"If that email has an account, we've sent a link to it."}),t(a.Notice,{status:"warning",announce:!1,children:"Two accounts have no opening balance."}),t(a.Notice,{status:"error",announce:!1,children:"Can't reach the server. Check the connection and try again."}),t(a.Notice,{technical:!0,announce:!1,children:"This computer's keychain is unavailable: access denied by the system"})]})},F={render:()=>t("form",{style:{display:"grid",gap:"var(--sl-space-3)",maxWidth:360},onSubmit:e=>e.preventDefault(),children:[t(a.Field.Root,{children:[t(a.Field.Label,{children:"Email"}),t(a.Input,{type:"email",defaultValue:"jordan@example.com"})]}),t(a.Button,{type:"submit",children:"Sign in"}),t(a.Notice,{status:"error",announce:!1,children:"Enter your password"})]})},B={render:()=>t("div",{style:{display:"grid",gap:"var(--sl-space-3)",maxWidth:960},children:[t(a.Notice,{status:"warning",announce:!1,tag:t(a.Badge,{shape:"square",children:"Incomplete"}),heading:"3 excluded \xB7 Draft incomplete",action:t(a.Button,{emphasis:"standard",children:"Review details"}),children:t("p",{children:"3 For Review items can't be counted as they are, so these totals leave them out. The books don't change."})}),t(a.Notice,{announce:!1,tag:t(a.Badge,{shape:"square",emphasis:"bold",children:"Snapshot"}),heading:"Historical snapshot \xB7 Draft, not posted",action:t(a.Button,{emphasis:"standard",children:"Return to live Draft"}),children:t("p",{children:"Preserved accounting state. Later classification and posting changes are left out."})})]})};var c=window.React,h=d||{},D=["Default","Statuses","InAForm","WithHeadingAndAction"];function k({id:e}){let n=m[e],o={...h.args||{},...n.args||{}};return(n.render||(s=>c.createElement(h.component,s)))(o,{args:o,id:e,name:e})}var I=D.map(e=>c.createElement("section",{key:e,className:"ds-story"},c.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),c.createElement("div",{className:"ds-story-body"},c.createElement(k,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(c.createElement(c.Fragment,null,I));})();
 
 </script>
 </body>

package/dist/exports/design-system/components/ParameterBar/README.md

@@ -0,0 +1,68 @@
+# ParameterBar
+
+The Base UI ParameterBar styled by the theme. Settings for a result, in one wrapping row on the tray: the app's fields at the start, the status line, the Run button and any extra actions at the end. Fields align on their controls (align-items: flex-end), so a field with a description does not push its neighbours' inputs down. When the bar is narrow the end group wraps onto its own line, at the start. data-changed (a setting changed since the last run) turns the status line to the warning text color. The bar itself does not dim anything; the app dims its own stale result. ParameterBarLocked is a fixed setting: the field label over the value as text with a lock, on no box, at the control's height so it lines up with the inputs beside it.
+
+Use `Loomiere.ParameterBar` (`import { ParameterBar } from '@base-ui/react/parameter-bar'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
+
+Base UI docs: https://base-ui.com/react/components/parameter-bar
+
+## Classes
+
+| Class | Data attributes it answers to |
+|---|---|
+| `ParameterBar` | `data-changed` |
+| `ParameterBarFields` |   |
+| `FieldRoot` |   |
+| `ParameterBarEnd` |   |
+| `ParameterBarStatus` |   |
+| `ParameterBarLocked` |   |
+| `ParameterBarLockedValue` |   |
+| `ParameterBarLockedText` |   |
+
+Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
+
+## Example
+
+From the ParameterBar stories (`Default`):
+
+```tsx
+export const Default: Story = {
+  args: { label: 'Report settings', onRun: () => undefined },
+  render: function Render() {
+    const [asOf, setAsOf] = React.useState('2026-10-31');
+    const [ran, setRan] = React.useState<string | null>(null);
+    const changed = ran !== null && ran !== asOf;
+    return (
+      <div style={{ display: 'grid', gap: 'var(--sl-space-4)' }}>
+        <ParameterBar
+          label="Report settings"
+          onRun={() => setRan(asOf)}
+          runLabel="Run"
+          changed={changed}
+          status={ran === null ? 'Not run yet' : `Ran for ${ran}`}
+        >
+          <Field.Root>
+            <Field.Label>As of</Field.Label>
+            <Input type="date" value={asOf} onChange={(event) => setAsOf(event.target.value)} />
+          </Field.Root>
+          <Field.Root>
+            <Field.Label>Minimum amount</Field.Label>
+            <Input inputMode="decimal" placeholder="No minimum" />
+          </Field.Root>
+        </ParameterBar>
+        <div style={{ opacity: changed ? 0.5 : 1 }}>{ran ? `Balance Sheet as of ${ran}` : 'The report appears here.'}</div>
+      </div>
+    );
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole('status')).toHaveTextContent('Not run yet');
+    await userEvent.click(canvas.getByRole('button', { name: 'Run' }));
+    await expect(canvas.getByRole('status')).toHaveTextContent('Ran for 2026-10-31');
+  },
+};
+
+/** A setting the page fixes, such as an Entity report locked to its Entity: text with a lock, not a disabled control. */
+```
+
+The preview also shows `LockedField`, `Narrow`.