From 1db1e04e8a4a71cd2e515271e560ddb92f55e10d Mon Sep 17 00:00:00 2001
From: Elena Poelman <elena.poelman@redpencil.io>
Date: Tue, 18 Feb 2025 13:02:34 +0100
Subject: [PATCH 01/10] convert collapsible and sidebar components to gts
 format

---
 .changeset/red-avocados-thank.md              |  5 +
 .changeset/silent-peas-travel.md              |  5 +
 .../src/components/collapsible.gts            | 92 +++++++++++++++++++
 .../src/components/collapsible.hbs            | 52 -----------
 .../src/components/collapsible.ts             | 22 -----
 .../src/components/sidebar.gts                | 23 +++++
 .../src/components/sidebar.hbs                |  6 --
 .../src/components/sidebar.ts                 | 12 ---
 8 files changed, 125 insertions(+), 92 deletions(-)
 create mode 100644 .changeset/red-avocados-thank.md
 create mode 100644 .changeset/silent-peas-travel.md
 create mode 100644 packages/ember-rdfa-editor/src/components/collapsible.gts
 delete mode 100644 packages/ember-rdfa-editor/src/components/collapsible.hbs
 delete mode 100644 packages/ember-rdfa-editor/src/components/collapsible.ts
 create mode 100644 packages/ember-rdfa-editor/src/components/sidebar.gts
 delete mode 100644 packages/ember-rdfa-editor/src/components/sidebar.hbs
 delete mode 100644 packages/ember-rdfa-editor/src/components/sidebar.ts

diff --git a/.changeset/red-avocados-thank.md b/.changeset/red-avocados-thank.md
new file mode 100644
index 000000000..ac27a129a
--- /dev/null
+++ b/.changeset/red-avocados-thank.md
@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor': patch
+---
+
+Convert `collapsible` component to `gts` format
diff --git a/.changeset/silent-peas-travel.md b/.changeset/silent-peas-travel.md
new file mode 100644
index 000000000..50fd9a904
--- /dev/null
+++ b/.changeset/silent-peas-travel.md
@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor': patch
+---
+
+Convert `sidebar` component to `gts` format
diff --git a/packages/ember-rdfa-editor/src/components/collapsible.gts b/packages/ember-rdfa-editor/src/components/collapsible.gts
new file mode 100644
index 000000000..81282e122
--- /dev/null
+++ b/packages/ember-rdfa-editor/src/components/collapsible.gts
@@ -0,0 +1,92 @@
+import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
+import AuIcon from '@appuniversum/ember-appuniversum/components/au-icon';
+import AuList, {
+  type AuListSignature,
+} from '@appuniversum/ember-appuniversum/components/au-list';
+import AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolbar';
+import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
+import { RemoveIcon } from '@appuniversum/ember-appuniversum/components/icons/remove';
+import { on } from '@ember/modifier';
+
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from 'tracked-built-ins';
+
+type CollapsibleSignature = {
+  Args: {
+    expandedInitially?: boolean;
+    title: string;
+  };
+  Element: HTMLDivElement;
+  Blocks: {
+    default: AuListSignature['Blocks']['default'];
+  };
+};
+export default class Collapsible extends Component<CollapsibleSignature> {
+  @tracked _expanded?: boolean;
+
+  get expanded() {
+    return this._expanded ?? this.args.expandedInitially;
+  }
+
+  @action
+  toggle() {
+    this._expanded = !this.expanded;
+  }
+
+  <template>
+    <div class="say-editor-hints__insert">
+      <div
+        class="au-c-accordion au-c-accordion--reverse au-c-accordion--border"
+      >
+        <AuToolbar
+          @nowrap={{true}}
+          @reverse={{true}}
+          {{on "click" this.toggle}}
+          as |Group|
+        >
+          <Group>
+            <div>
+              <AuButton
+                @skin="link"
+                aria-hidden="true"
+                focusable="false"
+                aria-expanded="{{if this.expanded 'true' 'false'}}"
+              >
+                {{@title}}
+              </AuButton>
+            </div>
+          </Group>
+          <Group>
+            {{#if this.expanded}}
+              <AuIcon
+                @icon={{RemoveIcon}}
+                @alignment="left"
+                @size="large"
+                @ariaHidden="true"
+              />
+              <span class="au-u-hidden-visually">
+                Open accordion
+              </span>
+            {{else}}
+              <AuIcon
+                @icon={{AddIcon}}
+                @alignment="left"
+                @size="large"
+                @ariaHidden="true"
+              />
+              <span class="au-u-hidden-visually">
+                Sluit accordion
+              </span>
+            {{/if}}
+          </Group>
+        </AuToolbar>
+        <div class={{if this.expanded "au-c-accordion__content" "au-u-hidden"}}>
+          <AuList @divider={{true}} as |Item|>
+            {{yield Item}}
+          </AuList>
+        </div>
+      </div>
+    </div>
+  </template>
+}
diff --git a/packages/ember-rdfa-editor/src/components/collapsible.hbs b/packages/ember-rdfa-editor/src/components/collapsible.hbs
deleted file mode 100644
index 34e7d2a4c..000000000
--- a/packages/ember-rdfa-editor/src/components/collapsible.hbs
+++ /dev/null
@@ -1,52 +0,0 @@
-{{! @glint-nocheck: not typesafe yet }}
-<div class="say-editor-hints__insert">
-  <div class="au-c-accordion au-c-accordion--reverse au-c-accordion--border">
-    <AuToolbar
-      @nowrap={{true}}
-      @reverse={{true}}
-      {{on "click" this.toggle}}
-      as |Group|
-    >
-      <Group>
-        <div>
-          <AuButton
-            @skin="link"
-            aria-hidden="true"
-            focusable="false"
-            aria-expanded="{{if this.expanded 'true' 'false'}}"
-          >
-            {{@title}}
-          </AuButton>
-        </div>
-      </Group>
-      <Group>
-        {{#if this.expanded}}
-          <AuIcon
-            @icon={{this.RemoveIcon}}
-            @alignment="left"
-            @size="large"
-            @ariaHidden="true"
-          />
-          <span class="au-u-hidden-visually">
-            Open accordion
-          </span>
-        {{else}}
-          <AuIcon
-            @icon={{this.AddIcon}}
-            @alignment="left"
-            @size="large"
-            @ariaHidden="true"
-          />
-          <span class="au-u-hidden-visually">
-            Sluit accordion
-          </span>
-        {{/if}}
-      </Group>
-    </AuToolbar>
-    <div class={{if this.expanded "au-c-accordion__content" "au-u-hidden"}}>
-      <AuList @divider={{true}} as |Item|>
-        {{yield Item}}
-      </AuList>
-    </div>
-  </div>
-</div>
\ No newline at end of file
diff --git a/packages/ember-rdfa-editor/src/components/collapsible.ts b/packages/ember-rdfa-editor/src/components/collapsible.ts
deleted file mode 100644
index 6f5d3287b..000000000
--- a/packages/ember-rdfa-editor/src/components/collapsible.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { action } from '@ember/object';
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import { RemoveIcon } from '@appuniversum/ember-appuniversum/components/icons/remove';
-import { AddIcon } from '@appuniversum/ember-appuniversum/components/icons/add';
-
-type Args = { expandedInitially?: boolean };
-export default class CollapsibleComponent extends Component<Args> {
-  RemoveIcon = RemoveIcon;
-  AddIcon = AddIcon;
-
-  @tracked _expanded: boolean | null = null;
-
-  get expanded() {
-    return this._expanded ?? this.args.expandedInitially;
-  }
-
-  @action
-  toggle() {
-    this._expanded = !this.expanded;
-  }
-}
diff --git a/packages/ember-rdfa-editor/src/components/sidebar.gts b/packages/ember-rdfa-editor/src/components/sidebar.gts
new file mode 100644
index 000000000..e58949c23
--- /dev/null
+++ b/packages/ember-rdfa-editor/src/components/sidebar.gts
@@ -0,0 +1,23 @@
+import type { TOC } from '@ember/component/template-only';
+import { hash } from '@ember/helper';
+import Collapsible from './collapsible.gts';
+
+type SidebarSignature = {
+  Blocks: {
+    default: [
+      {
+        Collapsible: typeof Collapsible;
+      },
+    ];
+  };
+  Element: HTMLDivElement;
+};
+const Sidebar: TOC<SidebarSignature> = <template>
+  <div class="say-editor-hints">
+    <ul class="say-editor-hints__list">
+      {{yield (hash Collapsible=Collapsible)}}
+    </ul>
+  </div>
+</template>;
+
+export default Sidebar;
diff --git a/packages/ember-rdfa-editor/src/components/sidebar.hbs b/packages/ember-rdfa-editor/src/components/sidebar.hbs
deleted file mode 100644
index 0f6963b85..000000000
--- a/packages/ember-rdfa-editor/src/components/sidebar.hbs
+++ /dev/null
@@ -1,6 +0,0 @@
-{{! @glint-nocheck: not typesafe yet }}
-<div class="say-editor-hints">
-  <ul class="say-editor-hints__list">
-    {{yield (hash Collapsible=(component "collapsible"))}}
-  </ul>
-</div>
\ No newline at end of file
diff --git a/packages/ember-rdfa-editor/src/components/sidebar.ts b/packages/ember-rdfa-editor/src/components/sidebar.ts
deleted file mode 100644
index 21e061e11..000000000
--- a/packages/ember-rdfa-editor/src/components/sidebar.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { action } from '@ember/object';
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-
-export default class SidebarComponent extends Component {
-  @tracked expanded = false;
-
-  @action
-  toggle() {
-    this.expanded = !this.expanded;
-  }
-}

From e627cfadd10ad5b50d2d1363f31288f60921d38d Mon Sep 17 00:00:00 2001
From: Elena Poelman <elena.poelman@redpencil.io>
Date: Wed, 19 Feb 2025 10:00:55 +0100
Subject: [PATCH 02/10] add manual-control option to collapsible component

---
 .changeset/eighty-keys-drum.md                |  9 ++++++
 .../src/components/collapsible.gts            | 28 ++++++++++++++-----
 2 files changed, 30 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/eighty-keys-drum.md

diff --git a/.changeset/eighty-keys-drum.md b/.changeset/eighty-keys-drum.md
new file mode 100644
index 000000000..f14af7f8a
--- /dev/null
+++ b/.changeset/eighty-keys-drum.md
@@ -0,0 +1,9 @@
+---
+'@lblod/ember-rdfa-editor': minor
+---
+
+`collapsible` component: add option to manually control toggled state through arguments:
+- `expanded` (optional, default: `false`)
+- `onToggle` (optional)
+
+The `expandedInitally` argument has been marked as deprecated, and should be replaced by the `expanded` argument
diff --git a/packages/ember-rdfa-editor/src/components/collapsible.gts b/packages/ember-rdfa-editor/src/components/collapsible.gts
index 81282e122..ab838d242 100644
--- a/packages/ember-rdfa-editor/src/components/collapsible.gts
+++ b/packages/ember-rdfa-editor/src/components/collapsible.gts
@@ -10,20 +10,32 @@ import { on } from '@ember/modifier';
 
 import { action } from '@ember/object';
 import Component from '@glimmer/component';
-import { tracked } from 'tracked-built-ins';
+import { localCopy } from 'tracked-toolbox';
+type Args = {
+  title: string;
+  onToggle?: (expanded: boolean) => void;
+} & (
+  | {
+      /** @deprecated, use `expanded` instead */
+      expandedInitially?: boolean;
+      expanded: never;
+    }
+  | {
+      /** @deprecated, use `expanded` instead */
+      expandedInitially?: never;
+      expanded?: boolean;
+    }
+);
 
 type CollapsibleSignature = {
-  Args: {
-    expandedInitially?: boolean;
-    title: string;
-  };
+  Args: Args;
   Element: HTMLDivElement;
   Blocks: {
     default: AuListSignature['Blocks']['default'];
   };
 };
 export default class Collapsible extends Component<CollapsibleSignature> {
-  @tracked _expanded?: boolean;
+  @localCopy('args.expanded') _expanded?: boolean;
 
   get expanded() {
     return this._expanded ?? this.args.expandedInitially;
@@ -31,7 +43,9 @@ export default class Collapsible extends Component<CollapsibleSignature> {
 
   @action
   toggle() {
-    this._expanded = !this.expanded;
+    const newState = !this.expanded;
+    this._expanded = newState;
+    this.args.onToggle?.(newState);
   }
 
   <template>

From 4b6e965aa8d376572fdd20a1f14599a25b297b11 Mon Sep 17 00:00:00 2001
From: Elena Poelman <elena.poelman@redpencil.io>
Date: Wed, 19 Feb 2025 10:13:53 +0100
Subject: [PATCH 03/10] add example to dummy app on persisting collapsible
 state

---
 test-app/app/components/dummy-container.hbs   |  2 +-
 .../sample-ember-nodes/sidebar-insert.hbs     | 35 --------
 .../sample-ember-nodes/sidebar-insert.ts      | 41 ---------
 .../components/sample-ember-nodes/sidebar.gts | 89 +++++++++++++++++++
 test-app/app/controllers/plugins.ts           | 25 ++++++
 test-app/app/templates/plugins.hbs            |  8 +-
 6 files changed, 121 insertions(+), 79 deletions(-)
 delete mode 100644 test-app/app/components/sample-ember-nodes/sidebar-insert.hbs
 delete mode 100644 test-app/app/components/sample-ember-nodes/sidebar-insert.ts
 create mode 100644 test-app/app/components/sample-ember-nodes/sidebar.gts

diff --git a/test-app/app/components/dummy-container.hbs b/test-app/app/components/dummy-container.hbs
index 914ce3fb3..f745bb1ce 100644
--- a/test-app/app/components/dummy-container.hbs
+++ b/test-app/app/components/dummy-container.hbs
@@ -1,4 +1,4 @@
-<div class="c-dummy">
+<div class="c-dummy" ...attributes>
   <div class="c-dummy__header">
     {{yield to="header"}}
   </div>
diff --git a/test-app/app/components/sample-ember-nodes/sidebar-insert.hbs b/test-app/app/components/sample-ember-nodes/sidebar-insert.hbs
deleted file mode 100644
index 865665c97..000000000
--- a/test-app/app/components/sample-ember-nodes/sidebar-insert.hbs
+++ /dev/null
@@ -1,35 +0,0 @@
-{{! @glint-nocheck: not typesafe yet }}
-<Sidebar as |Sidebar|>
-  <Sidebar.Collapsible @title={{t "ember-rdfa-editor.insert"}} as |Item|>
-    <Item>
-      <AuButton
-        @icon="add"
-        @iconAlignment="left"
-        @skin="link"
-        {{on "click" this.insertCard}}
-      >
-        Insert Card
-      </AuButton>
-    </Item>
-    <Item>
-      <AuButton
-        @icon="add"
-        @iconAlignment="left"
-        @skin="link"
-        {{on "click" this.insertCounter}}
-      >
-        Insert Counter
-      </AuButton>
-    </Item>
-    <Item>
-      <AuButton
-        @icon="add"
-        @iconAlignment="left"
-        @skin="link"
-        {{on "click" this.insertDropdown}}
-      >
-        Insert Dropdown
-      </AuButton>
-    </Item>
-  </Sidebar.Collapsible>
-</Sidebar>
\ No newline at end of file
diff --git a/test-app/app/components/sample-ember-nodes/sidebar-insert.ts b/test-app/app/components/sample-ember-nodes/sidebar-insert.ts
deleted file mode 100644
index 0dca06cd2..000000000
--- a/test-app/app/components/sample-ember-nodes/sidebar-insert.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-import { action } from '@ember/object';
-import Component from '@glimmer/component';
-import { NodeType } from '@lblod/ember-rdfa-editor';
-import { SayController } from '@lblod/ember-rdfa-editor';
-
-type RdfaIcPluginInsertComponentArgs = {
-  controller: SayController;
-};
-
-export default class RdfaIcPluginInsertComponent extends Component<RdfaIcPluginInsertComponentArgs> {
-  get controller() {
-    return this.args.controller;
-  }
-
-  get schema() {
-    return this.controller.schema;
-  }
-
-  @action
-  insertCard() {
-    this.insert(this.schema.nodes['card']);
-  }
-
-  @action
-  insertCounter() {
-    this.insert(this.schema.nodes['counter']);
-  }
-
-  @action
-  insertDropdown() {
-    this.insert(this.schema.nodes['dropdown']);
-  }
-
-  insert(type?: NodeType) {
-    if (type) {
-      this.controller.withTransaction((tr) => {
-        return tr.replaceSelectionWith(type.create()).scrollIntoView();
-      });
-    }
-  }
-}
diff --git a/test-app/app/components/sample-ember-nodes/sidebar.gts b/test-app/app/components/sample-ember-nodes/sidebar.gts
new file mode 100644
index 000000000..f084b9128
--- /dev/null
+++ b/test-app/app/components/sample-ember-nodes/sidebar.gts
@@ -0,0 +1,89 @@
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import type { NodeType, SayController } from '@lblod/ember-rdfa-editor';
+import Sidebar from '@lblod/ember-rdfa-editor/components/sidebar';
+import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
+import t from 'ember-intl/helpers/t';
+
+type Signature = {
+  Args: {
+    controller: SayController;
+    expanded?: boolean;
+    onToggle?: (expanded: boolean) => void;
+  };
+};
+
+export default class SampleEmberNodesSidebar extends Component<Signature> {
+  get controller() {
+    return this.args.controller;
+  }
+
+  get schema() {
+    return this.controller.schema;
+  }
+
+  @action
+  insertCard() {
+    this.insert(this.schema.nodes['card']);
+  }
+
+  @action
+  insertCounter() {
+    this.insert(this.schema.nodes['counter']);
+  }
+
+  @action
+  insertDropdown() {
+    this.insert(this.schema.nodes['dropdown']);
+  }
+
+  insert(type?: NodeType) {
+    if (type) {
+      this.controller.withTransaction((tr) => {
+        return tr.replaceSelectionWith(type.create()).scrollIntoView();
+      });
+    }
+  }
+  <template>
+    <Sidebar as |sidebar|>
+      <sidebar.Collapsible
+        @title={{t "ember-rdfa-editor.insert"}}
+        @expanded={{@expanded}}
+        @onToggle={{@onToggle}}
+        as |Item|
+      >
+        <Item>
+          <AuButton
+            @icon="add"
+            @iconAlignment="left"
+            @skin="link"
+            {{on "click" this.insertCard}}
+          >
+            Insert Card
+          </AuButton>
+        </Item>
+        <Item>
+          <AuButton
+            @icon="add"
+            @iconAlignment="left"
+            @skin="link"
+            {{on "click" this.insertCounter}}
+          >
+            Insert Counter
+          </AuButton>
+        </Item>
+        <Item>
+          <AuButton
+            @icon="add"
+            @iconAlignment="left"
+            @skin="link"
+            {{on "click" this.insertDropdown}}
+          >
+            Insert Dropdown
+          </AuButton>
+        </Item>
+      </sidebar.Collapsible>
+    </Sidebar>
+  </template>
+}
diff --git a/test-app/app/controllers/plugins.ts b/test-app/app/controllers/plugins.ts
index 01267897c..524e04902 100644
--- a/test-app/app/controllers/plugins.ts
+++ b/test-app/app/controllers/plugins.ts
@@ -71,9 +71,34 @@ import { heading } from '@lblod/ember-rdfa-editor/plugins/heading/nodes/heading'
 import { getOwner } from '@ember/owner';
 import { unwrap } from '@lblod/ember-rdfa-editor/utils/_private/option';
 import applyDevTools from 'prosemirror-dev-tools';
+import { modifier } from 'ember-modifier';
+
+const DEFAULT_SIDEBAR_EXPANDED = true;
+const SIDEBAR_EXPANDED_LOCAL_STORAGE_KEY = 'editor-sidebar-expanded';
 
 export default class IndexController extends Controller {
+  @tracked sidebarExpanded: boolean = DEFAULT_SIDEBAR_EXPANDED;
+
+  loadConfig = modifier(() => {
+    const sidebarExpandedStr = localStorage.getItem(
+      SIDEBAR_EXPANDED_LOCAL_STORAGE_KEY,
+    );
+    if (sidebarExpandedStr) {
+      this.sidebarExpanded = JSON.parse(sidebarExpandedStr) as boolean;
+    }
+  });
+
+  @action
+  onSidebarToggle(expanded: boolean) {
+    this.sidebarExpanded = expanded;
+    localStorage.setItem(
+      SIDEBAR_EXPANDED_LOCAL_STORAGE_KEY,
+      JSON.stringify(expanded),
+    );
+  }
+
   @tracked rdfaEditor?: SayController;
+
   schema = new Schema({
     nodes: {
       doc: docWithConfig({
diff --git a/test-app/app/templates/plugins.hbs b/test-app/app/templates/plugins.hbs
index e050be966..af3cc4bb6 100644
--- a/test-app/app/templates/plugins.hbs
+++ b/test-app/app/templates/plugins.hbs
@@ -1,5 +1,5 @@
 {{! @glint-nocheck: not typesafe yet }}
-<DummyContainer>
+<DummyContainer {{this.loadConfig}}>
   <:header>
     <DebugTools @controller={{this.rdfaEditor}} />
   </:header>
@@ -19,7 +19,11 @@
         />
       </:default>
       <:aside>
-        <SampleEmberNodes::SidebarInsert @controller={{this.rdfaEditor}} />
+        <SampleEmberNodes::Sidebar
+          @expanded={{this.sidebarExpanded}}
+          @onToggle={{this.onSidebarToggle}}
+          @controller={{this.rdfaEditor}}
+        />
       </:aside>
     </EditorContainer>
   </:content>

From d26281b60b290ff2111a6aa6514bd3d10df23e88 Mon Sep 17 00:00:00 2001
From: Elena Poelman <elena.poelman@redpencil.io>
Date: Wed, 19 Feb 2025 10:41:33 +0100
Subject: [PATCH 04/10] convert debug-info component to gts

---
 .changeset/real-feet-share.md                 |  5 ++
 .../components/_private/debug-info/index.gts  | 57 +++++++++++++++++++
 .../components/_private/debug-info/index.hbs  | 42 --------------
 .../components/_private/debug-info/index.ts   | 27 ---------
 4 files changed, 62 insertions(+), 69 deletions(-)
 create mode 100644 .changeset/real-feet-share.md
 create mode 100644 packages/ember-rdfa-editor/src/components/_private/debug-info/index.gts
 delete mode 100644 packages/ember-rdfa-editor/src/components/_private/debug-info/index.hbs
 delete mode 100644 packages/ember-rdfa-editor/src/components/_private/debug-info/index.ts

diff --git a/.changeset/real-feet-share.md b/.changeset/real-feet-share.md
new file mode 100644
index 000000000..0b7f910e2
--- /dev/null
+++ b/.changeset/real-feet-share.md
@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor': patch
+---
+
+Convert `DebugInfo` to `gts` format
diff --git a/packages/ember-rdfa-editor/src/components/_private/debug-info/index.gts b/packages/ember-rdfa-editor/src/components/_private/debug-info/index.gts
new file mode 100644
index 000000000..029fbe2dd
--- /dev/null
+++ b/packages/ember-rdfa-editor/src/components/_private/debug-info/index.gts
@@ -0,0 +1,57 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import type { ResolvedPNode } from '#root/utils/_private/types.ts';
+import { ChevronDownIcon } from '@appuniversum/ember-appuniversum/components/icons/chevron-down';
+import { ChevronUpIcon } from '@appuniversum/ember-appuniversum/components/icons/chevron-up';
+import AuPanel from '@appuniversum/ember-appuniversum/components/au-panel';
+import AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolbar';
+import AuHeading from '@appuniversum/ember-appuniversum/components/au-heading';
+import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
+import { on } from '@ember/modifier';
+
+type Signature = {
+  Args: {
+    node: ResolvedPNode;
+  };
+};
+
+export default class DebugInfo extends Component<Signature> {
+  @tracked collapsed = false;
+
+  get pos() {
+    return this.args.node.pos;
+  }
+
+  get nodeType() {
+    return this.args.node.value.type.name;
+  }
+
+  toggleSection = () => {
+    this.collapsed = !this.collapsed;
+  };
+
+  <template>
+    <AuPanel class="au-u-margin-bottom-tiny" as |Section|>
+      <Section>
+        <AuToolbar as |Group|>
+          <Group>
+            <AuHeading @level="5" @skin="5">Debug Info</AuHeading>
+          </Group>
+          <Group>
+            <AuButton
+              @skin="naked"
+              @icon={{if this.collapsed ChevronDownIcon ChevronUpIcon}}
+              {{on "click" this.toggleSection}}
+            />
+          </Group>
+        </AuToolbar>
+      </Section>
+      {{#unless this.collapsed}}
+        <Section>
+          <p><strong>Position: </strong>{{this.pos}}</p>
+          <p><strong>Nodetype: </strong>{{this.nodeType}}</p>
+        </Section>
+      {{/unless}}
+    </AuPanel>
+  </template>
+}
diff --git a/packages/ember-rdfa-editor/src/components/_private/debug-info/index.hbs b/packages/ember-rdfa-editor/src/components/_private/debug-info/index.hbs
deleted file mode 100644
index 0fc7182cb..000000000
--- a/packages/ember-rdfa-editor/src/components/_private/debug-info/index.hbs
+++ /dev/null
@@ -1,42 +0,0 @@
-{{! @glint-nocheck: not typesafe yet }}
-{{!-- <AuContent @skin="tiny">
-  <AuToolbar as |Group|>
-    <Group>
-      <AuHeading @level="5" @skin="5">Debug Info</AuHeading>
-    </Group>
-    <Group>
-      <AuButton
-        @skin="naked"
-        @icon={{if this.collapsed this.ChevronDownIcon this.ChevronUpIcon}}
-        {{on "click" this.toggleSection}}
-      />
-    </Group>
-  </AuToolbar>
-  {{#unless this.collapsed}}
-    <p><strong>Position: </strong>{{this.pos}}</p>
-    <p><strong>Nodetype: </strong>{{this.nodeType}}</p>
-  {{/unless}}
-</AuContent> --}}
-
-<AuPanel class="au-u-margin-bottom-tiny" as |Section|>
-  <Section>
-    <AuToolbar as |Group|>
-      <Group>
-        <AuHeading @level="5" @skin="5">Debug Info</AuHeading>
-      </Group>
-      <Group>
-        <AuButton
-          @skin="naked"
-          @icon={{if this.collapsed this.ChevronDownIcon this.ChevronUpIcon}}
-          {{on "click" this.toggleSection}}
-        />
-      </Group>
-    </AuToolbar>
-  </Section>
-  {{#unless this.collapsed}}
-    <Section>
-      <p><strong>Position: </strong>{{this.pos}}</p>
-      <p><strong>Nodetype: </strong>{{this.nodeType}}</p>
-    </Section>
-  {{/unless}}
-</AuPanel>
\ No newline at end of file
diff --git a/packages/ember-rdfa-editor/src/components/_private/debug-info/index.ts b/packages/ember-rdfa-editor/src/components/_private/debug-info/index.ts
deleted file mode 100644
index 2f9e8977f..000000000
--- a/packages/ember-rdfa-editor/src/components/_private/debug-info/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import type { ResolvedPNode } from '#root/utils/_private/types.ts';
-import { ChevronDownIcon } from '@appuniversum/ember-appuniversum/components/icons/chevron-down';
-import { ChevronUpIcon } from '@appuniversum/ember-appuniversum/components/icons/chevron-up';
-
-type Args = {
-  node: ResolvedPNode;
-};
-export default class DebugInfo extends Component<Args> {
-  ChevronDownIcon = ChevronDownIcon;
-  ChevronUpIcon = ChevronUpIcon;
-
-  @tracked collapsed = false;
-
-  get pos() {
-    return this.args.node.pos;
-  }
-
-  get nodeType() {
-    return this.args.node.value.type.name;
-  }
-
-  toggleSection = () => {
-    this.collapsed = !this.collapsed;
-  };
-}

From 30615b529b77d0049ebc4c44dcedcc260c1eccf8 Mon Sep 17 00:00:00 2001
From: Elena Poelman <elena.poelman@redpencil.io>
Date: Wed, 19 Feb 2025 10:41:47 +0100
Subject: [PATCH 05/10] convert attribute-editor component to gts format

---
 .changeset/sixty-bananas-jog.md               |   5 +
 .../_private/attribute-editor/index.gts       | 202 ++++++++++++++++++
 .../_private/attribute-editor/index.hbs       |  82 -------
 .../_private/attribute-editor/index.ts        | 101 ---------
 4 files changed, 207 insertions(+), 183 deletions(-)
 create mode 100644 .changeset/sixty-bananas-jog.md
 create mode 100644 packages/ember-rdfa-editor/src/components/_private/attribute-editor/index.gts
 delete mode 100644 packages/ember-rdfa-editor/src/components/_private/attribute-editor/index.hbs
 delete mode 100644 packages/ember-rdfa-editor/src/components/_private/attribute-editor/index.ts

diff --git a/.changeset/sixty-bananas-jog.md b/.changeset/sixty-bananas-jog.md
new file mode 100644
index 000000000..0f180f8d0
--- /dev/null
+++ b/.changeset/sixty-bananas-jog.md
@@ -0,0 +1,5 @@
+---
+'@lblod/ember-rdfa-editor': patch
+---
+
+Convert `AttributeEditor` component to `gts` format
diff --git a/packages/ember-rdfa-editor/src/components/_private/attribute-editor/index.gts b/packages/ember-rdfa-editor/src/components/_private/attribute-editor/index.gts
new file mode 100644
index 000000000..726b85746
--- /dev/null
+++ b/packages/ember-rdfa-editor/src/components/_private/attribute-editor/index.gts
@@ -0,0 +1,202 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import SayController from '#root/core/say-controller.ts';
+import type SayNodeSpec from '#root/core/say-node-spec.ts';
+import { unwrap } from '#root/utils/_private/option.ts';
+import TransformUtils from '#root/utils/_private/transform-utils.ts';
+import type { ResolvedPNode } from '#root/utils/_private/types.ts';
+import type { EmberChangeset } from 'ember-changeset';
+import { Changeset } from 'ember-changeset';
+import { trackedReset } from 'tracked-toolbox';
+import { TypeAssertionError } from '#root/utils/_private/errors.ts';
+import { CheckIcon } from '@appuniversum/ember-appuniversum/components/icons/check';
+import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
+import { ChevronDownIcon } from '@appuniversum/ember-appuniversum/components/icons/chevron-down';
+import { ChevronUpIcon } from '@appuniversum/ember-appuniversum/components/icons/chevron-up';
+import AuButtonGroup from '@appuniversum/ember-appuniversum/components/au-button-group';
+import { on } from '@ember/modifier';
+import AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolbar';
+import AuList from '@appuniversum/ember-appuniversum/components/au-list';
+import { and } from 'ember-truth-helpers';
+import AuLabel from '@appuniversum/ember-appuniversum/components/au-label';
+import AuPanel from '@appuniversum/ember-appuniversum/components/au-panel';
+import AuHeading from '@appuniversum/ember-appuniversum/components/au-heading';
+import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
+import AuTextarea from '@appuniversum/ember-appuniversum/components/au-textarea';
+
+import { uniqueId } from '@ember/helper';
+import { get } from '@ember/object';
+import { fn } from '@ember/helper';
+
+type Signature = {
+  Args: {
+    controller: SayController;
+    node: ResolvedPNode;
+  };
+};
+export default class AttributeEditor extends Component<Signature> {
+  @tracked collapsed = false;
+  @trackedReset<AttributeEditor, boolean>({
+    memo: 'node',
+    update: (component) => {
+      component.changeset = undefined;
+      return false;
+    },
+  })
+  isEditing = false;
+
+  @tracked changeset?: EmberChangeset;
+
+  get controller() {
+    return this.args.controller;
+  }
+
+  get node() {
+    return this.args.node;
+  }
+
+  get nodespec() {
+    return this.node.value.type.spec as SayNodeSpec;
+  }
+
+  toggleSection = () => {
+    this.collapsed = !this.collapsed;
+  };
+
+  isEditable = (attr: string) => {
+    //@ts-expect-error editable is not defined on attribute-spec type
+    return this.node.value.type.spec.attrs[attr].editable as
+      | boolean
+      | undefined;
+  };
+
+  enableEditingMode = () => {
+    this.changeset = Changeset(this.node.value.attrs);
+    this.isEditing = true;
+  };
+
+  cancelEditing = () => {
+    this.isEditing = false;
+    this.changeset = undefined;
+  };
+
+  saveChanges = () => {
+    this.controller?.withTransaction((tr) => {
+      for (const change of unwrap(this.changeset).changes) {
+        const { key, value } = change;
+        if (!(typeof key === 'string')) {
+          throw new TypeAssertionError();
+        }
+        TransformUtils.setAttribute(tr, this.node.pos, key, value);
+      }
+      return tr;
+    });
+    this.isEditing = false;
+    this.changeset = undefined;
+  };
+
+  updateChangeset = (attr: string, event: InputEvent) => {
+    if (this.changeset) {
+      this.changeset[attr] = (event.target as HTMLTextAreaElement).value;
+    }
+  };
+
+  formatValue = (value: unknown) => {
+    return JSON.stringify(value, null, 2);
+  };
+
+  editorComponent = (attr: string) => {
+    return this.nodespec?.attrs?.[attr].editor;
+  };
+
+  <template>
+    <AuPanel class="au-u-margin-bottom-tiny" as |Section|>
+      <Section>
+        <AuToolbar as |Group|>
+          <Group>
+            <AuHeading @level="5" @skin="5">Node attributes</AuHeading>
+          </Group>
+          <Group>
+            <AuButtonGroup>
+              {{#if this.isEditing}}
+                <AuButton
+                  @skin="naked"
+                  @iconAlignment="right"
+                  {{on "click" this.cancelEditing}}
+                >
+                  Cancel
+                </AuButton>
+                <AuButton
+                  @icon={{CheckIcon}}
+                  @iconAlignment="right"
+                  {{on "click" this.saveChanges}}
+                >
+                  Save
+                </AuButton>
+              {{else}}
+                <AuButton
+                  @skin="naked"
+                  @icon={{PencilIcon}}
+                  @iconAlignment="right"
+                  {{on "click" this.enableEditingMode}}
+                >
+                  Edit
+                </AuButton>
+              {{/if}}
+              <AuButton
+                @skin="naked"
+                @icon={{if this.collapsed ChevronDownIcon ChevronUpIcon}}
+                {{on "click" this.toggleSection}}
+              />
+            </AuButtonGroup>
+          </Group>
+        </AuToolbar>
+      </Section>
+      {{#unless this.collapsed}}
+        <Section>
+          <AuList @divider={{true}} as |Item|>
+            {{#each-in this.node.value.attrs as |key value|}}
+              <Item>
+                <div class="au-u-padding-tiny">
+                  {{#if (and this.isEditing (this.isEditable key))}}
+                    {{#let (uniqueId) as |id|}}
+                      <AuLabel for={{id}}>
+                        {{key}}
+                      </AuLabel>
+                      {{#let (this.editorComponent key) as |EditorComponent|}}
+                        {{#if EditorComponent}}
+                          {{! @glint-expect-error fix types of dynamic element }}
+                          <EditorComponent
+                            id={{id}}
+                            value={{get this.changeset key}}
+                            {{! @glint-expect-error fix changeset types }}
+                            {{on "change" (fn this.updateChangeset key)}}
+                          />
+                        {{else}}
+                          <AuTextarea
+                            @width="block"
+                            id={{id}}
+                            {{! @glint-expect-error fix changeset types }}
+                            value={{get this.changeset key}}
+                            {{on "change" (fn this.updateChangeset key)}}
+                          />
+                        {{/if}}
+                      {{/let}}
+                    {{/let}}
+                  {{else}}
+                    <p><strong>{{key}}</strong></p>
+                    <pre>{{if
+                        value
+                        (this.formatValue value)
+                        "<No value>"
+                      }}</pre>
+                  {{/if}}
+                </div>
+              </Item>
+            {{/each-in}}
+          </AuList>
+        </Section>
+      {{/unless}}
+    </AuPanel>
+  </template>
+}
diff --git a/packages/ember-rdfa-editor/src/components/_private/attribute-editor/index.hbs b/packages/ember-rdfa-editor/src/components/_private/attribute-editor/index.hbs
deleted file mode 100644
index 92248f703..000000000
--- a/packages/ember-rdfa-editor/src/components/_private/attribute-editor/index.hbs
+++ /dev/null
@@ -1,82 +0,0 @@
-{{! @glint-nocheck: not typesafe yet }}
-<AuPanel class="au-u-margin-bottom-tiny" as |Section|>
-  <Section>
-    <AuToolbar as |Group|>
-      <Group>
-        <AuHeading @level="5" @skin="5">Node attributes</AuHeading>
-      </Group>
-      <Group>
-        <AuButtonGroup>
-          {{#if this.isEditing}}
-            <AuButton
-              @skin="naked"
-              @iconAlignment="right"
-              {{on "click" this.cancelEditing}}
-            >
-              Cancel
-            </AuButton>
-            <AuButton
-              @icon={{this.CheckIcon}}
-              @iconAlignment="right"
-              {{on "click" this.saveChanges}}
-            >
-              Save
-            </AuButton>
-          {{else}}
-            <AuButton
-              @skin="naked"
-              @icon={{this.PencilIcon}}
-              @iconAlignment="right"
-              {{on "click" this.enableEditingMode}}
-            >
-              Edit
-            </AuButton>
-          {{/if}}
-          <AuButton
-            @skin="naked"
-            @icon={{if this.collapsed this.ChevronDownIcon this.ChevronUpIcon}}
-            {{on "click" this.toggleSection}}
-          />
-        </AuButtonGroup>
-      </Group>
-    </AuToolbar>
-  </Section>
-  {{#unless this.collapsed}}
-    <Section>
-      <AuList @divider={{true}} as |Item|>
-        {{#each-in this.node.value.attrs as |key value|}}
-          <Item>
-            <div class="au-u-padding-tiny">
-              {{#if (and this.isEditing (this.isEditable key))}}
-                {{#let (unique-id) as |id|}}
-                  <AuLabel for={{id}}>
-                    {{key}}
-                  </AuLabel>
-                  {{#let (this.editorComponent key) as |EditorComponent|}}
-                    {{#if EditorComponent}}
-                      <EditorComponent
-                        id={{id}}
-                        value={{get this.changeset key}}
-                        {{on "change" (fn this.updateChangeset key)}}
-                      />
-                    {{else}}
-                      <AuTextarea
-                        @width="block"
-                        id={{id}}
-                        value={{get this.changeset key}}
-                        {{on "change" (fn this.updateChangeset key)}}
-                      />
-                    {{/if}}
-                  {{/let}}
-                {{/let}}
-              {{else}}
-                <p><strong>{{key}}</strong></p>
-                <pre>{{if value (this.formatValue value) "<No value>"}}</pre>
-              {{/if}}
-            </div>
-          </Item>
-        {{/each-in}}
-      </AuList>
-    </Section>
-  {{/unless}}
-</AuPanel>
\ No newline at end of file
diff --git a/packages/ember-rdfa-editor/src/components/_private/attribute-editor/index.ts b/packages/ember-rdfa-editor/src/components/_private/attribute-editor/index.ts
deleted file mode 100644
index 47a32dd08..000000000
--- a/packages/ember-rdfa-editor/src/components/_private/attribute-editor/index.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import SayController from '#root/core/say-controller.ts';
-import type SayNodeSpec from '#root/core/say-node-spec.ts';
-import { unwrap } from '#root/utils/_private/option.ts';
-import TransformUtils from '#root/utils/_private/transform-utils.ts';
-import type { ResolvedPNode } from '#root/utils/_private/types.ts';
-import type { EmberChangeset } from 'ember-changeset';
-import { Changeset } from 'ember-changeset';
-import { trackedReset } from 'tracked-toolbox';
-import { CheckIcon } from '@appuniversum/ember-appuniversum/components/icons/check';
-import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
-import { ChevronDownIcon } from '@appuniversum/ember-appuniversum/components/icons/chevron-down';
-import { ChevronUpIcon } from '@appuniversum/ember-appuniversum/components/icons/chevron-up';
-import { TypeAssertionError } from '#root/utils/_private/errors.ts';
-
-type Args = {
-  controller: SayController;
-  node: ResolvedPNode;
-};
-
-export default class AttributeEditor extends Component<Args> {
-  CheckIcon = CheckIcon;
-  PencilIcon = PencilIcon;
-  ChevronDownIcon = ChevronDownIcon;
-  ChevronUpIcon = ChevronUpIcon;
-
-  @tracked collapsed = false;
-  @trackedReset<AttributeEditor, boolean>({
-    memo: 'node',
-    update: (component) => {
-      component.changeset = undefined;
-      return false;
-    },
-  })
-  isEditing = false;
-
-  @tracked changeset?: EmberChangeset;
-
-  get controller() {
-    return this.args.controller;
-  }
-
-  get node() {
-    return this.args.node;
-  }
-
-  get nodespec() {
-    return this.node.value.type.spec as SayNodeSpec;
-  }
-
-  toggleSection = () => {
-    this.collapsed = !this.collapsed;
-  };
-
-  isEditable = (attr: string) => {
-    //@ts-expect-error editable is not defined on attribute-spec type
-    return this.node.value.type.spec.attrs[attr].editable as
-      | boolean
-      | undefined;
-  };
-
-  enableEditingMode = () => {
-    this.changeset = Changeset(this.node.value.attrs);
-    this.isEditing = true;
-  };
-
-  cancelEditing = () => {
-    this.isEditing = false;
-    this.changeset = undefined;
-  };
-
-  saveChanges = () => {
-    this.controller?.withTransaction((tr) => {
-      for (const change of unwrap(this.changeset).changes) {
-        const { key, value } = change;
-        if (!(typeof key === 'string')) {
-          throw new TypeAssertionError();
-        }
-        TransformUtils.setAttribute(tr, this.node.pos, key, value);
-      }
-      return tr;
-    });
-    this.isEditing = false;
-    this.changeset = undefined;
-  };
-
-  updateChangeset = (attr: string, event: InputEvent) => {
-    if (this.changeset) {
-      this.changeset[attr] = (event.target as HTMLTextAreaElement).value;
-    }
-  };
-
-  formatValue = (value: unknown) => {
-    return JSON.stringify(value, null, 2);
-  };
-
-  editorComponent = (attr: string) => {
-    return this.nodespec?.attrs?.[attr].editor;
-  };
-}

From 5de517b6255dc9bae7499e649944feb25b29b609 Mon Sep 17 00:00:00 2001
From: Elena Poelman <elena.poelman@redpencil.io>
Date: Wed, 19 Feb 2025 11:06:57 +0100
Subject: [PATCH 06/10] debug-info: add option to control expanded state

---
 .changeset/perfect-trainers-judge.md              |  7 +++++++
 .../src/components/_private/debug-info/index.gts  | 15 +++++++++------
 2 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/perfect-trainers-judge.md

diff --git a/.changeset/perfect-trainers-judge.md b/.changeset/perfect-trainers-judge.md
new file mode 100644
index 000000000..a6e326f69
--- /dev/null
+++ b/.changeset/perfect-trainers-judge.md
@@ -0,0 +1,7 @@
+---
+'@lblod/ember-rdfa-editor': minor
+---
+
+`DebugInfo` component, add arguments to control `expanded` state:
+- `onToggle` (optional)
+- `expanded` (optional, default: `true`)
diff --git a/packages/ember-rdfa-editor/src/components/_private/debug-info/index.gts b/packages/ember-rdfa-editor/src/components/_private/debug-info/index.gts
index 029fbe2dd..ba6f87bae 100644
--- a/packages/ember-rdfa-editor/src/components/_private/debug-info/index.gts
+++ b/packages/ember-rdfa-editor/src/components/_private/debug-info/index.gts
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 import type { ResolvedPNode } from '#root/utils/_private/types.ts';
 import { ChevronDownIcon } from '@appuniversum/ember-appuniversum/components/icons/chevron-down';
 import { ChevronUpIcon } from '@appuniversum/ember-appuniversum/components/icons/chevron-up';
@@ -8,15 +7,18 @@ import AuToolbar from '@appuniversum/ember-appuniversum/components/au-toolbar';
 import AuHeading from '@appuniversum/ember-appuniversum/components/au-heading';
 import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
 import { on } from '@ember/modifier';
+import { localCopy } from 'tracked-toolbox';
 
 type Signature = {
   Args: {
     node: ResolvedPNode;
+    expanded?: boolean;
+    onToggle?: (expanded: boolean) => void;
   };
 };
 
 export default class DebugInfo extends Component<Signature> {
-  @tracked collapsed = false;
+  @localCopy('args.expanded', true) declare expanded: boolean;
 
   get pos() {
     return this.args.node.pos;
@@ -27,7 +29,8 @@ export default class DebugInfo extends Component<Signature> {
   }
 
   toggleSection = () => {
-    this.collapsed = !this.collapsed;
+    this.expanded = !this.expanded;
+    this.args.onToggle?.(this.expanded);
   };
 
   <template>
@@ -40,18 +43,18 @@ export default class DebugInfo extends Component<Signature> {
           <Group>
             <AuButton
               @skin="naked"
-              @icon={{if this.collapsed ChevronDownIcon ChevronUpIcon}}
+              @icon={{if this.expanded ChevronUpIcon ChevronDownIcon}}
               {{on "click" this.toggleSection}}
             />
           </Group>
         </AuToolbar>
       </Section>
-      {{#unless this.collapsed}}
+      {{#if this.expanded}}
         <Section>
           <p><strong>Position: </strong>{{this.pos}}</p>
           <p><strong>Nodetype: </strong>{{this.nodeType}}</p>
         </Section>
-      {{/unless}}
+      {{/if}}
     </AuPanel>
   </template>
 }

From 8fabad240e7c4a4895f1b1a00141ebe2ff479f5a Mon Sep 17 00:00:00 2001
From: Elena Poelman <elena.poelman@redpencil.io>
Date: Wed, 19 Feb 2025 11:09:19 +0100
Subject: [PATCH 07/10] attribute-editor: add option to control expanded state

---
 .changeset/nice-months-complain.md               |  7 +++++++
 .../_private/attribute-editor/index.gts          | 16 ++++++++++------
 .../components/_private/doc-editor/info-pill.ts  |  2 +-
 3 files changed, 18 insertions(+), 7 deletions(-)
 create mode 100644 .changeset/nice-months-complain.md

diff --git a/.changeset/nice-months-complain.md b/.changeset/nice-months-complain.md
new file mode 100644
index 000000000..ef011c4f2
--- /dev/null
+++ b/.changeset/nice-months-complain.md
@@ -0,0 +1,7 @@
+---
+'@lblod/ember-rdfa-editor': minor
+---
+
+`AttributeEditor` component, add arguments to control `expanded` state:
+- `onToggle` (optional)
+- `expanded` (optional, default: `true`)
diff --git a/packages/ember-rdfa-editor/src/components/_private/attribute-editor/index.gts b/packages/ember-rdfa-editor/src/components/_private/attribute-editor/index.gts
index 726b85746..a772e7dce 100644
--- a/packages/ember-rdfa-editor/src/components/_private/attribute-editor/index.gts
+++ b/packages/ember-rdfa-editor/src/components/_private/attribute-editor/index.gts
@@ -7,7 +7,7 @@ import TransformUtils from '#root/utils/_private/transform-utils.ts';
 import type { ResolvedPNode } from '#root/utils/_private/types.ts';
 import type { EmberChangeset } from 'ember-changeset';
 import { Changeset } from 'ember-changeset';
-import { trackedReset } from 'tracked-toolbox';
+import { localCopy, trackedReset } from 'tracked-toolbox';
 import { TypeAssertionError } from '#root/utils/_private/errors.ts';
 import { CheckIcon } from '@appuniversum/ember-appuniversum/components/icons/check';
 import { PencilIcon } from '@appuniversum/ember-appuniversum/components/icons/pencil';
@@ -32,10 +32,13 @@ type Signature = {
   Args: {
     controller: SayController;
     node: ResolvedPNode;
+    expanded?: boolean;
+    onToggle?: (expanded: boolean) => void;
   };
 };
 export default class AttributeEditor extends Component<Signature> {
-  @tracked collapsed = false;
+  @localCopy('args.expanded', true) declare expanded: boolean;
+
   @trackedReset<AttributeEditor, boolean>({
     memo: 'node',
     update: (component) => {
@@ -60,7 +63,8 @@ export default class AttributeEditor extends Component<Signature> {
   }
 
   toggleSection = () => {
-    this.collapsed = !this.collapsed;
+    this.expanded = !this.expanded;
+    this.args.onToggle?.(this.expanded);
   };
 
   isEditable = (attr: string) => {
@@ -145,14 +149,14 @@ export default class AttributeEditor extends Component<Signature> {
               {{/if}}
               <AuButton
                 @skin="naked"
-                @icon={{if this.collapsed ChevronDownIcon ChevronUpIcon}}
+                @icon={{if this.expanded ChevronUpIcon ChevronDownIcon }}
                 {{on "click" this.toggleSection}}
               />
             </AuButtonGroup>
           </Group>
         </AuToolbar>
       </Section>
-      {{#unless this.collapsed}}
+      {{#if this.expanded}}
         <Section>
           <AuList @divider={{true}} as |Item|>
             {{#each-in this.node.value.attrs as |key value|}}
@@ -196,7 +200,7 @@ export default class AttributeEditor extends Component<Signature> {
             {{/each-in}}
           </AuList>
         </Section>
-      {{/unless}}
+      {{/if}}
     </AuPanel>
   </template>
 }
diff --git a/packages/ember-rdfa-editor/src/components/_private/doc-editor/info-pill.ts b/packages/ember-rdfa-editor/src/components/_private/doc-editor/info-pill.ts
index cc27c779c..7497778dd 100644
--- a/packages/ember-rdfa-editor/src/components/_private/doc-editor/info-pill.ts
+++ b/packages/ember-rdfa-editor/src/components/_private/doc-editor/info-pill.ts
@@ -1,6 +1,6 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
-import AttributeEditor from '../attribute-editor/index.ts';
+import AttributeEditor from '../attribute-editor/index.gts';
 import type { ResolvedPNode } from '#root/utils/_private/types.ts';
 import RdfaEditor from '../rdfa-editor/index.gts';
 import type SayController from '#root/core/say-controller.ts';

From d8f6a2d08304195da4d415078c4ad64779f547e5 Mon Sep 17 00:00:00 2001
From: Elena Poelman <elena.poelman@redpencil.io>
Date: Wed, 19 Feb 2025 11:09:28 +0100
Subject: [PATCH 08/10] rdfa-editor: add option to control expanded state

---
 .changeset/soft-seas-know.md                       |  7 +++++++
 .../src/components/_private/rdfa-editor/index.gts  | 14 ++++++++------
 2 files changed, 15 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/soft-seas-know.md

diff --git a/.changeset/soft-seas-know.md b/.changeset/soft-seas-know.md
new file mode 100644
index 000000000..1807c6d40
--- /dev/null
+++ b/.changeset/soft-seas-know.md
@@ -0,0 +1,7 @@
+---
+'@lblod/ember-rdfa-editor': minor
+---
+
+`RdfaEditor` component, add arguments to control `expanded` state:
+- `onToggle` (optional)
+- `expanded` (optional, default: `true`)
diff --git a/packages/ember-rdfa-editor/src/components/_private/rdfa-editor/index.gts b/packages/ember-rdfa-editor/src/components/_private/rdfa-editor/index.gts
index 4b7f2dfcd..154e8b20d 100644
--- a/packages/ember-rdfa-editor/src/components/_private/rdfa-editor/index.gts
+++ b/packages/ember-rdfa-editor/src/components/_private/rdfa-editor/index.gts
@@ -1,5 +1,4 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 import { isResourceNode } from '#root/utils/node-utils.ts';
 import { on } from '@ember/modifier';
 import RdfaPropertyEditor from './property-editor/index.ts';
@@ -17,17 +16,20 @@ import AuButton from '@appuniversum/ember-appuniversum/components/au-button';
 import ExternalTripleEditor from './external-triple-editor.gts';
 import type SayController from '#root/core/say-controller.ts';
 import { NodeSelection } from 'prosemirror-state';
+import { localCopy } from 'tracked-toolbox';
 
 type Args = {
   controller?: SayController;
   node: ResolvedPNode;
   additionalImportedResources?: string[];
+  expanded?: boolean;
+  onToggle?: (expanded: boolean) => void;
 };
 export default class RdfaEditor extends Component<Args> {
-  @tracked collapsed = false;
+  @localCopy('args.expanded', true) declare expanded: boolean;
 
   toggleSection = () => {
-    this.collapsed = !this.collapsed;
+    this.expanded = !this.expanded;
   };
 
   get isResourceNode() {
@@ -92,7 +94,7 @@ export default class RdfaEditor extends Component<Args> {
               <AuPill>{{this.type}}</AuPill>
               <AuButton
                 @skin="naked"
-                @icon={{if this.collapsed ChevronDownIcon ChevronUpIcon}}
+                @icon={{if this.expanded ChevronUpIcon ChevronDownIcon}}
                 {{on "click" this.toggleSection}}
               />
             </Group>
@@ -101,7 +103,7 @@ export default class RdfaEditor extends Component<Args> {
       </Section>
       {{#if this.controller}}
         {{#if @node}}
-          {{#unless this.collapsed}}
+          {{#if this.expanded}}
             {{#if this.showPropertiesSection}}
               <Section>
                 <ExternalTripleEditor
@@ -131,7 +133,7 @@ export default class RdfaEditor extends Component<Args> {
                 <RemoveNode @node={{@node}} @controller={{@controller}} />
               {{/if}}
             </Section>
-          {{/unless}}
+          {{/if}}
         {{else}}
           <Section>
             <RdfaWrappingUtils @node={{@node}} @controller={{@controller}} />

From a1dfd3383673101355054f940bb027d92fba8582 Mon Sep 17 00:00:00 2001
From: Elena Poelman <elena.poelman@redpencil.io>
Date: Fri, 21 Feb 2025 11:23:07 +0100
Subject: [PATCH 09/10] linting

---
 .../src/components/_private/attribute-editor/index.gts          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ember-rdfa-editor/src/components/_private/attribute-editor/index.gts b/packages/ember-rdfa-editor/src/components/_private/attribute-editor/index.gts
index a772e7dce..3b72fe170 100644
--- a/packages/ember-rdfa-editor/src/components/_private/attribute-editor/index.gts
+++ b/packages/ember-rdfa-editor/src/components/_private/attribute-editor/index.gts
@@ -149,7 +149,7 @@ export default class AttributeEditor extends Component<Signature> {
               {{/if}}
               <AuButton
                 @skin="naked"
-                @icon={{if this.expanded ChevronUpIcon ChevronDownIcon }}
+                @icon={{if this.expanded ChevronUpIcon ChevronDownIcon}}
                 {{on "click" this.toggleSection}}
               />
             </AuButtonGroup>

From 2d3324be41698fff24c8697ffb4dab66d4263a17 Mon Sep 17 00:00:00 2001
From: Elena Poelman <elena.poelman@redpencil.io>
Date: Fri, 21 Feb 2025 13:16:04 +0100
Subject: [PATCH 10/10] rdfa-editor: add missing onToggle call

---
 .../src/components/_private/rdfa-editor/index.gts                | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/ember-rdfa-editor/src/components/_private/rdfa-editor/index.gts b/packages/ember-rdfa-editor/src/components/_private/rdfa-editor/index.gts
index 154e8b20d..dab51409f 100644
--- a/packages/ember-rdfa-editor/src/components/_private/rdfa-editor/index.gts
+++ b/packages/ember-rdfa-editor/src/components/_private/rdfa-editor/index.gts
@@ -30,6 +30,7 @@ export default class RdfaEditor extends Component<Args> {
 
   toggleSection = () => {
     this.expanded = !this.expanded;
+    this.args.onToggle?.(this.expanded);
   };
 
   get isResourceNode() {