From ee8d1a77cc37598f54e6153c1ae0378ffe5c8fba Mon Sep 17 00:00:00 2001
From: "Amy J. Ko" <ajko@uw.edu>
Date: Wed, 7 Aug 2024 08:43:37 -0700
Subject: [PATCH] Formatted different types of name in text, to convey meaning
 better.

---
 CHANGELOG.md                               |  6 +++
 src/app.html                               |  4 +-
 src/components/editor/InputView.svelte     |  6 +--
 src/components/editor/ReferenceView.svelte | 45 ++++++++++++++--------
 4 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f4ba2a379..2584a8396 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,12 @@
 We'll note all notable changes in this file, including bug fixes, enhancements, and all closed issues.
 Dates are in `YYYY-MM-DD` format and versions are in [semantic versioning](http://semver.org/) format.
 
+## 0.10.9 2024-08-10
+
+### Added
+
+-   Formatted different types of references
+
 ## 0.10.8 2024-08-03
 
 ### Fixed
diff --git a/src/app.html b/src/app.html
index 36915941c..93b34bf36 100644
--- a/src/app.html
+++ b/src/app.html
@@ -28,10 +28,10 @@
         <link
             rel="preload"
             as="style"
-            href="https://fonts.googleapis.com/css2?family=Noto+Emoji&family=Noto+Color+Emoji&family=Noto+Sans+Mono&family=Noto+Sans:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Noto+Emoji&family=Noto+Color+Emoji&family=Noto+Sans+Mono@0,400;1,400;0,700&family=Noto+Sans:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap"
         />
         <link
-            href="https://fonts.googleapis.com/css2?family=Noto+Emoji&family=Noto+Color+Emoji&family=Noto+Sans+Mono&family=Noto+Sans:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap"
+            href="https://fonts.googleapis.com/css2?family=Noto+Emoji&family=Noto+Color+Emoji&family=Noto+Sans+Mono@0,400;1,400;0,700&family=Noto+Sans:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap"
             rel="stylesheet"
         />
 
diff --git a/src/components/editor/InputView.svelte b/src/components/editor/InputView.svelte
index 9d522b0ff..2fb620943 100644
--- a/src/components/editor/InputView.svelte
+++ b/src/components/editor/InputView.svelte
@@ -7,6 +7,6 @@
     export let node: Input;
 </script>
 
-<NodeView node={node.name} /><NodeView node={node.bind} /><NodeView
-    node={node.value}
-/>
+<small><NodeView node={node.name} /></small><NodeView
+    node={node.bind}
+/><NodeView node={node.value} />
diff --git a/src/components/editor/ReferenceView.svelte b/src/components/editor/ReferenceView.svelte
index c29aec722..e0e527d23 100644
--- a/src/components/editor/ReferenceView.svelte
+++ b/src/components/editor/ReferenceView.svelte
@@ -8,22 +8,27 @@
     import type StreamValue from '@values/StreamValue';
     import type Value from '../../values/Value';
     import { animationFactor } from '../../db/Database';
+    import Source from '@nodes/Source';
 
     export let node: Reference;
 
     let evaluation = getEvaluation();
 
+    $: project = $evaluation?.evaluator.project;
+    $: root = project?.getRoot(node);
+    $: context =
+        root?.root instanceof Source
+            ? project?.getContext(root.root)
+            : undefined;
+    $: definition = node.resolve(context);
+
     let stream: StreamValue<Value, unknown> | undefined;
-    $: {
-        if ($evaluation) {
-            const parent = $evaluation.evaluator.project
-                .getRoot(node)
-                ?.getParent(node);
-            stream =
-                parent instanceof Evaluate
-                    ? $evaluation.evaluator.getStreamFor(parent)
-                    : undefined;
-        }
+    $: if ($evaluation) {
+        const parent = root?.getParent(node);
+        stream =
+            parent instanceof Evaluate
+                ? $evaluation.evaluator.getStreamFor(parent)
+                : undefined;
     }
 
     // If this evaluated to the stream that recently changed, style it.
@@ -49,13 +54,12 @@
     }
 </script>
 
-{#if animating}
-    <span class="changed">
-        <NodeView node={node.name} />
-    </span>
-{:else}
+<span
+    class:changed={animating}
+    class={definition ? definition.getDescriptor() : ''}
+>
     <NodeView node={node.name} />
-{/if}
+</span>
 
 <style>
     .changed {
@@ -81,4 +85,13 @@
             transform: scale(1);
         }
     }
+
+    .StructureDefinition,
+    .StreamDefinition {
+        font-style: italic;
+    }
+
+    .StreamDefinition {
+        text-shadow: 3px 3px 2px var(--wordplay-chrome);
+    }
 </style>