View: Pointer view component

package.json

@@ -27,6 +27,8 @@
     "lucide-vue-next": "^0.548.0",
     "markdown-it": "^14.1.1",
     "reka-ui": "^2.6.0",
+    "shadcn": "^3.5.0",
+    "shadcn-ui": "^0.9.5",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.16",
     "tw-animate-css": "^1.4.0",

src/components/PointerPreferences.vue

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { usePointerPreferences } from '@/composable/usePointerPreferences'
+import { Switch } from '@/components/ui/switch'
+import { Button } from '@/components/ui/button'
+import {
+  PopoverContent,
+} from '@/components/ui/popover'
+
+const { preferences, resetPreferences } = usePointerPreferences()
+</script>
+
+<template>
+  <PopoverContent class="w-80" align="start">
+    <div class="space-y-4">
+      <!-- Header -->
+      <div class="flex items-center justify-between">
+        <div class="space-y-1">
+          <h4 class="font-medium leading-none">Display Preferences</h4>
+          <p class="text-sm text-muted-foreground">
+            Customize how pointers are displayed
+          </p>
+        </div>
+        <Button
+          variant="ghost"
+          size="sm"
+          @click="resetPreferences"
+          class="h-8 px-2 text-xs"
+        >
+          Reset
+        </Button>
+      </div>
+
+      <!-- Preferences List -->
+      <div class="space-y-4">
+        <!-- Show Full Pointer IDs -->
+        <div class="flex items-center justify-between space-x-2">
+          <div class="flex flex-col space-y-1 flex-1">
+            <label class="font-medium text-sm cursor-pointer">
+              Full Pointer IDs
+            </label>
+            <span class="text-xs text-muted-foreground">
+              Show complete pointer identifiers instead of shortened versions
+            </span>
+          </div>
+          <Switch 
+            v-model="preferences.show_full_pointer_ids"
+            id="show-full-ids"
+          />
+        </div>
+
+        <!-- Show Type Hints -->
+        <div class="flex items-center justify-between space-x-2">
+          <div class="flex flex-col space-y-1 flex-1">
+            <label class="font-medium text-sm cursor-pointer">
+              Type Hints
+            </label>
+            <span class="text-xs text-muted-foreground">
+              Display type annotations for values
+            </span>
+          </div>
+          <Switch 
+            v-model="preferences.show_type_hints"
+            id="show-type-hints"
+          />
+        </div>
+
+        <!-- Show Array Indices -->
+        <div class="flex items-center justify-between space-x-2">
+          <div class="flex flex-col space-y-1 flex-1">
+            <label class="font-medium text-sm cursor-pointer">
+              Array Indices & Keys
+            </label>
+            <span class="text-xs text-muted-foreground">
+              Show array indices and object keys
+            </span>
+          </div>
+          <Switch 
+            v-model="preferences.show_array_indicies"
+            id="show-array-indices"
+          />
+        </div>
+
+        <!-- Hide Type Hints for Primitives -->
+        <div class="flex items-center justify-between space-x-2">
+          <div class="flex flex-col space-y-1 flex-1">
+            <label class="font-medium text-sm cursor-pointer">
+              Hide Primitive Type Hints
+            </label>
+            <span class="text-xs text-muted-foreground">
+              Hide type hints for integers, booleans, and text (show for maps/arrays)
+            </span>
+          </div>
+          <Switch 
+            v-model="preferences.hide_type_hints_for_primitives"
+            id="hide-primitive-hints"
+          />
+        </div>
+
+        <!-- Hide Map Key Type Hints for Primitives -->
+        <div class="flex items-center justify-between space-x-2">
+          <div class="flex flex-col space-y-1 flex-1">
+            <label class="font-medium text-sm cursor-pointer">
+              Hide Map Key Primitive Type Hints
+            </label>
+            <span class="text-xs text-muted-foreground">
+              Hide type hints for primitive map keys (text, integer, boolean)
+            </span>
+          </div>
+          <Switch 
+            v-model="preferences.hide_map_key_type_hints_for_primitives"
+            id="hide-map-key-primitive-hints"
+          />
+        </div>
+      </div>
+    </div>
+  </PopoverContent>
+</template>

src/components/PointerRefInline.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { usePointerPreferences } from '@/composable/usePointerPreferences'
+import { getTypeName } from '@/lib/pointer-types'
+import type { DIF } from '@unyt/datex'
+import { computed, inject } from 'vue'
+
+// Props
+interface PointerRefInlineProps {
+  pointerId: string
+}
+
+const props = defineProps<PointerRefInlineProps>()
+
+// Emits
+const emit = defineEmits<{
+  click: [pointerId: string]
+}>()
+
+// Inject the pointers map
+const pointers = inject<Map<string, DIF.Definitions.DIFValueContainer>>('pointers')
+
+// Use preferences composable
+const { preferences } = usePointerPreferences()
+
+// Compute display ID based on preferences
+const displayId = computed(() => {
+  if (preferences.value.show_full_pointer_ids) {
+    return props.pointerId
+  }
+
+  // Show abbreviated ID (last 4 chars)
+  const numericPart = props.pointerId.slice(1) // Remove $
+  if (numericPart.length > 4) {
+    return `$${numericPart.slice(-4)}`
+  }
+
+  return props.pointerId
+})
+
+// Get the value preview for the pointer
+const valuePreview = computed(() => {
+  if (!pointers) return ''
+
+  const difValueContainer = pointers.get(props.pointerId)
+  if (!difValueContainer) return ''
+
+  // Extract value from DIF container
+  const value = typeof difValueContainer === 'object' && difValueContainer !== null && 'value' in difValueContainer
+    ? (difValueContainer as Record<string, unknown>).value
+    : difValueContainer
+
+  const typeName = getTypeName(difValueContainer)
+
+  // Format preview based on type
+  if (typeName === 'text') return `"${value}"`
+  if (typeName === 'boolean') return value ? 'true' : 'false'
+  if (typeName === 'integer' || typeName === 'decimal') return String(value)
+  if (typeName === 'null') return 'null'
+  if (typeName === 'list') return '[...]'
+  if (typeName === 'map' || typeName === 'object') return '{...}'
+
+  return String(value)
+})
+
+// Handle click
+function handleClick() {
+  emit('click', props.pointerId)
+}
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="300">
+    <Tooltip>
+      <TooltipTrigger as-child>
+        <button
+          @click.stop="handleClick"
+          class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded text-xs font-medium bg-primary/10 text-primary hover:bg-primary/20 transition-colors cursor-pointer border border-primary/20"
+        >
+          <span class="font-mono">{{ displayId }}</span>
+          <span v-if="valuePreview" class="text-foreground/60 font-normal">→ {{ valuePreview }}</span>
+        </button>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p class="text-xs font-mono">{{ pointerId }}</p>
+        <p v-if="valuePreview" class="text-xs text-muted-foreground">Value: {{ valuePreview }}</p>
+        <p class="text-xs text-muted-foreground mt-1">Click to jump to definition</p>
+      </TooltipContent>
+    </Tooltip>
+  </TooltipProvider>
+</template>