create-partylayer-app 0.4.1 → 0.5.1

package/dist/templates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../src/templates.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,qEAAqE;IACrE,EAAE,EAAE,MAAM,CAAC;IACX,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,SAAS,EAAE,YAAY,EAqBnC,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEnD"}
+{"version":3,"file":"templates.d.ts","sourceRoot":"","sources":["../src/templates.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,YAAY;IAC3B,qEAAqE;IACrE,EAAE,EAAE,MAAM,CAAC;IACX,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,IAAI,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,SAAS,EAAE,YAAY,EA+BnC,CAAC;AAEF,wBAAgB,YAAY,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEnD"}

package/dist/templates.js

@@ -4,6 +4,16 @@ export const TEMPLATES = [
         label: 'React + Vite',
         hint: 'React 18, Vite, zero-config PartyLayerKit',
     },
+    {
+        id: 'react-tokenization',
+        label: 'React + Tokenization vertical',
+        hint: 'CIP-0056 holdings, transfers, and issuance over a typed demo backend',
+    },
+    {
+        id: 'react-dvp',
+        label: 'React + DvP vertical',
+        hint: 'Atomic delivery versus payment over CIP-0056 allocations',
+    },
     {
         id: 'next-ssr',
         label: 'Next.js (SSR)',

package/dist/templates.js.map

@@ -1 +1 @@
-{"version":3,"file":"templates.js","sourceRoot":"","sources":["../src/templates.ts"],"names":[],"mappings":"AAaA,MAAM,CAAC,MAAM,SAAS,GAAmB;IACvC;QACE,EAAE,EAAE,YAAY;QAChB,KAAK,EAAE,cAAc;QACrB,IAAI,EAAE,2CAA2C;KAClD;IACD;QACE,EAAE,EAAE,UAAU;QACd,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,mDAAmD;KAC1D;IACD;QACE,EAAE,EAAE,gBAAgB;QACpB,KAAK,EAAE,oBAAoB;QAC3B,IAAI,EAAE,yDAAyD;KAChE;IACD;QACE,EAAE,EAAE,SAAS;QACb,KAAK,EAAE,oBAAoB;QAC3B,IAAI,EAAE,sDAAsD;KAC7D;CACF,CAAC;AAEF,MAAM,UAAU,YAAY,CAAC,KAAa;IACxC,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC;AAC/C,CAAC"}
+{"version":3,"file":"templates.js","sourceRoot":"","sources":["../src/templates.ts"],"names":[],"mappings":"AAaA,MAAM,CAAC,MAAM,SAAS,GAAmB;IACvC;QACE,EAAE,EAAE,YAAY;QAChB,KAAK,EAAE,cAAc;QACrB,IAAI,EAAE,2CAA2C;KAClD;IACD;QACE,EAAE,EAAE,oBAAoB;QACxB,KAAK,EAAE,+BAA+B;QACtC,IAAI,EAAE,sEAAsE;KAC7E;IACD;QACE,EAAE,EAAE,WAAW;QACf,KAAK,EAAE,sBAAsB;QAC7B,IAAI,EAAE,0DAA0D;KACjE;IACD;QACE,EAAE,EAAE,UAAU;QACd,KAAK,EAAE,eAAe;QACtB,IAAI,EAAE,mDAAmD;KAC1D;IACD;QACE,EAAE,EAAE,gBAAgB;QACpB,KAAK,EAAE,oBAAoB;QAC3B,IAAI,EAAE,yDAAyD;KAChE;IACD;QACE,EAAE,EAAE,SAAS;QACb,KAAK,EAAE,oBAAoB;QAC3B,IAAI,EAAE,sDAAsD;KAC7D;CACF,CAAC;AAEF,MAAM,UAAU,YAAY,CAAC,KAAa;IACxC,OAAO,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC;AAC/C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-partylayer-app",
-  "version": "0.4.1",
+  "version": "0.5.1",
   "description": "Scaffold a PartyLayer dApp (Canton wallet integration) in seconds.",
   "type": "module",
   "bin": {

package/templates/next-ssr/README.md

@@ -1,6 +1,6 @@
 # {{PROJECT_NAME}}
 
-A [PartyLayer](https://partylayer.xyz) dApp — Next.js App Router with **SSR session**.
+A [PartyLayer](https://partylayer.xyz) dApp: Next.js App Router with **SSR session**.
 
 ## Develop
 
@@ -11,8 +11,8 @@ npm run dev
 ## How SSR session works
 
 - **Server** ([lib/session.ts](lib/session.ts)) reads the session cookie via `next/headers` `cookies()` + `@partylayer/session`'s `createCookieStorage` → the connected party is rendered in the **initial HTML** (no disconnected→connected flash). `app/page.tsx` is a Server Component that gates on `getServerSession()`.
-- **Client** ([app/providers.tsx](app/providers.tsx)) wraps the app in `PartyLayerKit` with `sessionOptions={{ storage: createCookieStorage() }}` — `document.cookie` (synchronous), the **same** cookie the server reads.
-- `next/headers` is imported only in your app (`lib/session.ts`), never in `@partylayer/session` — the library stays framework-agnostic.
+- **Client** ([app/providers.tsx](app/providers.tsx)) wraps the app in `PartyLayerKit` with `sessionOptions={{ storage: createCookieStorage() }}`. This uses `document.cookie` (synchronous), the **same** cookie the server reads.
+- `next/headers` is imported only in your app (`lib/session.ts`), never in `@partylayer/session`. The library stays framework-agnostic.
 
 Switch networks by changing `network` in `app/providers.tsx` and `appName` accordingly.
 
@@ -25,4 +25,4 @@ npm run build && npm start
 ## Docs
 
 - [PartyLayer docs](https://partylayer.xyz/docs/introduction)
-- [@partylayer/session — createCookieStorage](https://www.npmjs.com/package/@partylayer/session)
+- [@partylayer/session: createCookieStorage](https://www.npmjs.com/package/@partylayer/session)

package/templates/next-ssr/_package.json

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@partylayer/react": "^2.1.0",
-    "@partylayer/sdk": "^0.15.0",
+    "@partylayer/sdk": "^0.16.0",
     "@partylayer/session": "^1.1.4",
     "@tanstack/react-query": "^5.0.0",
     "next": "^14.2.5",

package/templates/react-dvp/README.md

@@ -0,0 +1,134 @@
+# {{PROJECT_NAME}}
+
+A DvP (delivery versus payment) vertical for Canton, scaffolded with
+create-partylayer-app. A single-page dApp where a settlement venue runs an atomic
+two-leg trade over the CIP-0056 (Canton Token Standard) allocation surface. A trade
+IS an allocation request; each counterparty allocates its leg; the venue settles both
+legs in one all-or-nothing step.
+
+Everything runs on an in-memory demo backend (typed fixtures behind a small
+`DvpBackend` interface), so every hook is exercised for real (loading, success,
+error, invalidation) without a live ledger. Model 2 throughout: PartyLayer owns none
+of the transport; the dApp supplies every read and submit fetcher, and the hooks type
+the request and wrap the query or mutation.
+
+> Reference quality, NOT production audited. This template demonstrates the API in a
+> realistic composition. Review, test, and harden it before using it in production.
+
+## Run it
+
+```bash
+npm create partylayer-app@latest my-app -- --template react-dvp
+cd my-app
+npm install
+npm run dev
+```
+
+## What is on screen
+
+A header with the connect UI, a demo-party switcher (venue / alice / bob), a
+synchronizer picker, and a light/dark toggle (the gold theme family); then three
+section cards:
+
+| Section | Hook(s) exercised |
+| :-- | :-- |
+| Trades | `useAllocationRequests`, `useAllocationInstruction`, `useAllocationRequestAction` (counterparty); `useTokenAllocations`, `useChoice`, `useAllocationAction` (venue) |
+| My allocations | `useTokenAllocations` and `useAllocationAction` (withdraw) |
+| Holdings | `useTokenHoldings` |
+
+A trade is an allocation request: `settlement { executor: the venue, settlementRef,
+requestedAt, allocateBefore, settleBefore }` plus two opposite `transferLegs` (Alice
+pays DEMO-USD to Bob; Bob delivers DEMO-BOND to Alice). A non-selectable `registry`
+party administers both instruments; the venue (executor) and the registry are
+distinct roles.
+
+## Demo flows
+
+1. Connect and create a trade. As the Venue, click Connect Wallet (the console
+   adapter, themed by the gold family). Enter a USD amount and a BOND amount and click
+   New trade: a new allocation request appears.
+2. Alice allocates her USD leg. Switch to Alice. Her leg shows a `CostPreview` before
+   confirm; Allocate my leg composes the allocation spec from the request and submits
+   it through `useAllocationInstruction`. Her USD holdings drop and a change holding is
+   written back.
+3. Bob allocates his BOND leg. Switch to Bob and allocate his leg the same way.
+4. The venue settles atomically. Switch to the Venue. The trade shows 2/2 allocated
+   and Settle is enabled. Settle moves both legs in one step: Bob receives the USD,
+   Alice receives the BOND, and the balances swap.
+5. Withdraw then settle shows the failure. Allocate a leg, then withdraw it from My
+   allocations. The venue's Settle is disabled while a leg is unmatched; the store
+   itself throws a descriptive all-or-nothing error (listing the missing leg ids) that
+   moves nothing.
+6. Bob rejects a trade. Switch to Bob and Reject an open trade through
+   `useAllocationRequestAction` (action `reject`, actor = Bob). Any allocations for it
+   are released and the trade is dropped.
+7. The venue withdraws a trade. As the Venue, Withdraw trade through
+   `useAllocationRequestAction` (action `withdraw`), releasing allocations and dropping
+   the trade.
+
+The venue can also Cancel allocation on a matched leg (`useAllocationAction`, action
+`cancel`) for the abort path that releases a counterparty's backing early.
+
+## Party-scoped caching
+
+Every hook folds the current demo party into its `key` (for example
+`['dvp', 'holdings', party]`), so each party's data is cached independently. Switching
+parties never shows another party's cached data. Invalidation after every write goes
+through the exported `partyLayerKeys` factories (see `src/lib/invalidate.ts`),
+refreshing the trades (`allocationRequests`), allocations (`tokenAllocations`), and
+holdings (`tokenHoldings`).
+
+## Atomic settle
+
+The venue's settle mirrors the official trading-app `OTCTrade_Settle`: it verifies an
+expected allocation exists for EVERY leg (a spec match on settlement, transfer leg id,
+and transfer leg) and that `now < settleBefore`, then executes ALL legs in ONE store
+mutation. If any leg is unallocated or the deadline has passed it throws BEFORE any
+asset moves, listing the missing leg ids. This is a dApp-specific trade choice, so the
+UI wires it through the generic `useChoice`: a real venue settles atomically via its
+trade contract's choice whose body exercises `Allocation_ExecuteTransfer` per leg in a
+single transaction, which is exactly why this is `useChoice` and not the
+per-allocation typed hook.
+
+The comparator that decides whether an allocation satisfies a request leg is
+`allocationMatchesRequestLeg` from `@partylayer/react/query` (decimal-as-string
+equality without float conversion), used by both the store and the venue view via the
+thin adapter in `src/lib/match.ts`.
+
+## Decimal handling
+
+Amounts are decimal strings end to end (never JS numbers), matching the CIP-0056
+`Decimal` convention. The demo store simplifies arithmetic to two decimal places using
+bigint cents (`src/lib/format.ts`); a real dApp handling arbitrary precision should use
+a decimal library.
+
+## Real mode
+
+To wire this against a live validator and registry, replace the demo backend's
+fetchers. The hooks and the UI stay exactly as they are.
+
+- Discovery. Read the trades a party can act on with an ACS interface-filter query for
+  `Splice.Api.Token.AllocationRequestV1:AllocationRequest`, mapped into
+  `TokenAllocationRequestRef`. Implementations SHOULD make at least all transfer-leg
+  senders observers of the request, which is how wallets discover it.
+- Allocate a leg (`useAllocationInstruction`). Compose the allocation spec from the
+  request (`settlement`, `transferLegId`, `transferLeg`), then in the `submit` fetcher
+  fetch the registry's allocation-factory (its `choiceContext` and
+  `disclosedContracts`), fill `extraArgs.context`, and exercise
+  `AllocationFactory_Allocate` with the disclosed contracts. `expectedAdmin` must come
+  from a trusted source (e.g. a read against your own participant).
+- Respond to a request (`useAllocationRequestAction`). `AllocationRequest_Reject` (with
+  `actor`) and `AllocationRequest_Withdraw` are called with an EMPTY choice context per
+  the standard, so the `submit` fetcher exercises directly on the request cid with
+  `extraArgs { context: empty, meta }`, no registry fetch.
+- Act on a funded allocation (`useAllocationAction`). Withdraw and cancel go through
+  the registry's per-action choice contexts on the allocation cid.
+- Settle. The venue's trade app exercises its own settle choice, whose body runs
+  `Allocation_ExecuteTransfer` for every leg in one transaction. The official Splice
+  token-standard trading-app example is the canonical reference for this flow.
+
+For the shapes these fetchers pass around, `@partylayer/react/query` exports the
+disclosed contract and choice context types (`TokenDisclosedContract`,
+`TokenChoiceContext`, `TokenTransferFactory`, `TokenAllocationFactory`) plus
+`mergeDisclosedContracts` for combining the disclosures of several registry contexts
+into one submission.

package/templates/react-dvp/_gitignore

@@ -0,0 +1,8 @@
+node_modules
+dist
+dist-ssr
+*.local
+.DS_Store
+.env
+.env.*
+!.env.example

package/templates/react-dvp/_package.json

@@ -0,0 +1,26 @@
+{
+  "name": "{{PROJECT_NAME}}",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@partylayer/react": "^2.2.1",
+    "@partylayer/sdk": "^0.16.0",
+    "@partylayer/adapter-console": "^0.3.15",
+    "@tanstack/react-query": "^5.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.2"
+  }
+}

package/templates/react-dvp/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{PROJECT_NAME}}</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/react-dvp/src/App.css

@@ -0,0 +1,385 @@
+/* App chrome. Two token sets follow the light/dark toggle, tuned to the gold
+   family so the chrome matches the PartyLayer primitives (which retint from the
+   gold theme independently). This is what differentiates DvP from tokenization's teal. */
+.app {
+  --bg: #ffffff;
+  --surface: #fefce8;
+  --card: #ffffff;
+  --text: #1c1917;
+  --muted: #78716c;
+  --border: rgba(28, 25, 23, 0.14);
+  --accent: #b45309;
+  --accent-contrast: #ffffff;
+  --error-bg: #fef2f2;
+  --error-text: #b00020;
+  --lock-bg: #fff7ed;
+  --lock-text: #9a3412;
+  min-height: 100vh;
+  background: var(--bg);
+  color: var(--text);
+  transition: background 200ms, color 200ms;
+}
+
+.app-dark {
+  --bg: #0c0a09;
+  --surface: #1c1917;
+  --card: #1c1917;
+  --text: #fafaf9;
+  --muted: #a8a29e;
+  --border: rgba(255, 255, 255, 0.1);
+  --accent: #fbbf24;
+  --accent-contrast: #1c1917;
+  --error-bg: #2a0f10;
+  --error-text: #fca5a5;
+  --lock-bg: #2a1c0f;
+  --lock-text: #fbbf24;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  flex-wrap: wrap;
+  padding: 16px 24px;
+  border-bottom: 1px solid var(--border);
+}
+
+.brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.brand-mark {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: var(--accent);
+  display: inline-block;
+}
+.brand-title {
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+.brand-sub {
+  font-size: 12px;
+  color: var(--muted);
+}
+
+.topbar-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.party-switch {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+.party-switch-label {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--muted);
+  margin-right: 2px;
+}
+.party-chip {
+  border: none;
+  background: transparent;
+  color: var(--muted);
+  padding: 4px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 13px;
+  font-weight: 600;
+}
+.party-chip-on {
+  background: var(--accent);
+  color: var(--accent-contrast);
+}
+
+.acting-line {
+  max-width: 1100px;
+  margin: 16px auto 0;
+  padding: 0 24px;
+  color: var(--muted);
+  font-size: 14px;
+}
+.acting-line code {
+  font-size: 12px;
+}
+
+.grid {
+  max-width: 1100px;
+  margin: 16px auto 0;
+  padding: 0 24px 40px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+  gap: 20px;
+}
+
+.card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  overflow: hidden;
+}
+.card-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--border);
+}
+.card-head h2 {
+  margin: 0;
+  font-size: 16px;
+}
+.card-hint {
+  font-size: 11px;
+  color: var(--muted);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+}
+.card-body {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+.row-block {
+  flex-direction: column;
+  align-items: stretch;
+  gap: 10px;
+}
+.row-block .row-actions {
+  justify-content: flex-start;
+}
+.row-main {
+  flex: 1;
+  min-width: 0;
+}
+.row-title {
+  font-weight: 600;
+}
+.row-sub {
+  font-size: 12px;
+  word-break: break-all;
+}
+.row-actions {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.muted {
+  color: var(--muted);
+}
+
+.badge {
+  font-size: 11px;
+  font-weight: 600;
+  padding: 3px 8px;
+  border-radius: 999px;
+  white-space: nowrap;
+}
+.badge-neutral {
+  background: var(--surface);
+  color: var(--muted);
+}
+.badge-lock {
+  background: var(--lock-bg);
+  color: var(--lock-text);
+}
+.badge-ok {
+  background: var(--surface);
+  color: var(--accent);
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+  gap: 12px;
+  align-items: end;
+}
+.field-action .btn {
+  width: 100%;
+}
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.field-label {
+  font-size: 12px;
+  color: var(--muted);
+}
+.field-action {
+  justify-content: flex-end;
+}
+.field input,
+.field select,
+.topbar-controls select {
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--text);
+  font-size: 14px;
+}
+
+.btn {
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 8px 14px;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+.btn:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+.btn-primary {
+  background: var(--accent);
+  color: var(--accent-contrast);
+}
+.btn-ghost {
+  background: transparent;
+  color: var(--text);
+  border-color: var(--border);
+}
+.btn-small {
+  padding: 5px 10px;
+  font-size: 13px;
+}
+
+.review {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding-top: 4px;
+}
+.review-line,
+.balance-line,
+.hint-line {
+  font-size: 14px;
+}
+
+.state {
+  padding: 16px;
+  border-radius: 10px;
+  font-size: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.state-empty {
+  background: var(--surface);
+  color: var(--muted);
+}
+.state-error {
+  background: var(--error-bg);
+  color: var(--error-text);
+}
+
+.skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.skeleton-row {
+  height: 40px;
+  border-radius: 10px;
+  background: linear-gradient(90deg, var(--surface), var(--border), var(--surface));
+  background-size: 200% 100%;
+  animation: shimmer 1.2s ease-in-out infinite;
+}
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.issuer-summary {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+.supply {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+}
+.freeze {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.alloc-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.footer {
+  max-width: 1100px;
+  margin: 0 auto;
+  padding: 24px;
+  color: var(--muted);
+  font-size: 13px;
+  border-top: 1px solid var(--border);
+}
+
+/* DvP leg layout */
+.leg-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+.leg-action {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 10px;
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+.leg-status {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  flex-wrap: wrap;
+}