Design Change Ledger

Try this workflow

1. Save two revisions with different design requirements and a rationale for each.
2. Choose Compare revisions, then pick earlier and later records to see actual text values and changed fields.
3. Open a history row to edit or delete it. Reload to verify persistence. Editing replaces a record; add a revision to preserve the previous one.

Records stay in this browser. Reset demo data clears this saved records for this app.

The AppSPEC

<?xml version="1.0" encoding="UTF-8"?>
<APP ID="design-change-ledger" NAME="Design Change Ledger" THEME="modern-minimal" WIDTH="1240px">
  <DATA MODE="local" />
  <STATE ID="history" NAV="Revision history" ICON="history">
    <TEXT STYLE="h1" TEXT="Keep the reasoning behind each design change" />
    <TEXT STYLE="muted" TEXT="Save design requirements and revision rationale locally. Choose two saved revisions to compare their actual text and see which fields changed." />
    <FORM SAVE="design_revisions" SUBMIT-LABEL="Save revision">
      <FIELD NAME="title" LABEL="Revision name" TYPE="text" REQUIRED="true" />
      <FIELD NAME="requirements" LABEL="Design requirements" TYPE="textarea" REQUIRED="true" />
      <FIELD NAME="rationale" LABEL="Why this changed" TYPE="textarea" REQUIRED="true" />
    </FORM>
    <TABLE SRC="design_revisions" SORT="created" OPEN="edit" EMPTY="No revisions yet. Save one above, then a second to compare them.">
      <COL FIELD="created" LABEL="Saved" />
      <COL FIELD="title" LABEL="Revision" />
      <COL FIELD="rationale" LABEL="Rationale" />
    </TABLE>
  </STATE>
  <STATE ID="compare" NAV="Compare revisions" ICON="columns-2">
    <TEXT STYLE="h1" TEXT="Compare two saved revisions" />
    <TEXT STYLE="muted" TEXT="Choose earlier and later records. A changed marker compares text and type, not whether a design is better." />
    <RECORD-COMPARE SRC="design_revisions" TITLE="title" SORT="created">
      <COL FIELD="title" LABEL="Revision name" />
      <COL FIELD="requirements" LABEL="Design requirements" />
      <COL FIELD="rationale" LABEL="Why this changed" />
    </RECORD-COMPARE>
  </STATE>
  <STATE ID="edit" WIDTH="760px">
    <TEXT STYLE="h1" TEXT="Edit revision" />
    <TEXT STYLE="muted" TEXT="Editing replaces this record. Save a new revision to preserve an earlier version." />
    <FORM UPDATE="design_revisions" TO="history" SUBMIT-LABEL="Save changes">
      <FIELD NAME="title" LABEL="Revision name" TYPE="text" REQUIRED="true" />
      <FIELD NAME="requirements" LABEL="Design requirements" TYPE="textarea" REQUIRED="true" />
      <FIELD NAME="rationale" LABEL="Why this changed" TYPE="textarea" REQUIRED="true" />
    </FORM>
    <BUTTON LABEL="Delete revision" ACTION="remove" STYLE="danger" ICON="trash-2" />
  </STATE>
  <WIRE LABEL="remove" DELETE="design_revisions" TO="history" />
</APP>