@plures/design-dojo 0.5.3 → 0.7.1

package/dist/app/MemorySidebar.svelte

@@ -0,0 +1,258 @@
+<!--
+  MemorySidebar — Scrollable list of agent memories with category badges and search.
+
+  Features:
+  - Live search filter (client-side, no debounce needed for typical sizes)
+  - Category badges with distinct colors per category
+  - Relative timestamp display
+  - Empty state message
+-->
+<script lang="ts">
+  import type { Memory, MemoryCategory } from "./MemorySidebar.types.js";
+
+  interface Props {
+    memories: Memory[];
+    /** Custom CSS class. */
+    class?: string;
+  }
+
+  let { memories, class: className = "" }: Props = $props();
+
+  let query = $state("");
+
+  const filtered = $derived(
+    query.trim()
+      ? memories.filter((m) =>
+          m.content.toLowerCase().includes(query.trim().toLowerCase()),
+        )
+      : memories,
+  );
+
+  const CATEGORY_LABEL: Record<MemoryCategory, string> = {
+    fact:       "Fact",
+    goal:       "Goal",
+    preference: "Pref",
+    context:    "Context",
+    other:      "Other",
+  };
+
+  function relativeTime(date: Date): string {
+    const diffMs = Date.now() - date.getTime();
+    const s = Math.floor(diffMs / 1000);
+    if (s < 60)  return "just now";
+    const m = Math.floor(s / 60);
+    if (m < 60)  return `${m}m ago`;
+    const h = Math.floor(m / 60);
+    if (h < 24)  return `${h}h ago`;
+    const d = Math.floor(h / 24);
+    return `${d}d ago`;
+  }
+</script>
+
+<aside class="memory-sidebar {className}" aria-label="Memories">
+  <div class="memory-sidebar__header">
+    <h2 class="memory-sidebar__title">Memories</h2>
+    <span class="memory-sidebar__count">{filtered.length}</span>
+  </div>
+
+  <div class="memory-sidebar__search">
+    <span class="memory-sidebar__search-icon" aria-hidden="true">⌕</span>
+    <input
+      class="memory-sidebar__search-input"
+      type="search"
+      placeholder="Search memories…"
+      bind:value={query}
+      aria-label="Search memories"
+    />
+  </div>
+
+  <div class="memory-sidebar__list" role="list">
+    {#if filtered.length === 0}
+      <p class="memory-sidebar__empty">
+        {query.trim() ? "No memories match your search." : "No memories yet."}
+      </p>
+    {:else}
+      {#each filtered as memory (memory.id)}
+        <div class="memory-sidebar__item" role="listitem">
+          <div class="memory-sidebar__item-row">
+            <span class="memory-sidebar__badge memory-sidebar__badge--{memory.category}">
+              {CATEGORY_LABEL[memory.category]}
+            </span>
+            <span class="memory-sidebar__time">{relativeTime(memory.timestamp)}</span>
+          </div>
+          <p class="memory-sidebar__content">{memory.content}</p>
+        </div>
+      {/each}
+    {/if}
+  </div>
+</aside>
+
+<style>
+  .memory-sidebar {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    background: var(--surface-1, #141414);
+    border-right: 1px solid var(--color-border, #2a2a2a);
+    min-width: 220px;
+  }
+
+  /* ── Header ── */
+  .memory-sidebar__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--space-4, 16px) var(--space-4, 16px) var(--space-2, 8px);
+    flex-shrink: 0;
+  }
+
+  .memory-sidebar__title {
+    margin: 0;
+    font-size: var(--text-sm, 14px);
+    font-weight: 700;
+    color: var(--color-text, #e8e8e8);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  .memory-sidebar__count {
+    font-size: var(--text-xs, 12px);
+    color: var(--color-text-muted, #888);
+    background: var(--surface-2, #1e1e1e);
+    border-radius: var(--radius-full, 9999px);
+    padding: 2px 8px;
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* ── Search ── */
+  .memory-sidebar__search {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2, 8px);
+    margin: 0 var(--space-3, 12px) var(--space-3, 12px);
+    padding: 0 var(--space-3, 12px);
+    background: var(--surface-2, #1e1e1e);
+    border: 1.5px solid var(--color-border, #2a2a2a);
+    border-radius: var(--radius-md, 10px);
+    flex-shrink: 0;
+    transition: border-color 0.15s;
+  }
+
+  .memory-sidebar__search:focus-within {
+    border-color: var(--color-accent, #6366f1);
+  }
+
+  .memory-sidebar__search-icon {
+    color: var(--color-text-muted, #888);
+    font-size: var(--text-base, 16px);
+    user-select: none;
+    flex-shrink: 0;
+  }
+
+  .memory-sidebar__search-input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    color: var(--color-text, #e8e8e8);
+    font-family: inherit;
+    font-size: var(--text-sm, 14px);
+    padding: var(--space-2, 8px) 0;
+  }
+
+  .memory-sidebar__search-input::placeholder {
+    color: var(--color-text-muted, #888);
+  }
+
+  /* Remove default search cancel button in WebKit */
+  .memory-sidebar__search-input::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+  }
+
+  /* ── List ── */
+  .memory-sidebar__list {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: 0 var(--space-3, 12px) var(--space-3, 12px);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2, 8px);
+  }
+
+  .memory-sidebar__empty {
+    margin: var(--space-4, 16px) 0;
+    text-align: center;
+    font-size: var(--text-sm, 14px);
+    color: var(--color-text-subtle, #555);
+  }
+
+  /* ── Item ── */
+  .memory-sidebar__item {
+    background: var(--surface-2, #1e1e1e);
+    border: 1px solid var(--color-border, #2a2a2a);
+    border-radius: var(--radius-md, 10px);
+    padding: var(--space-3, 12px);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1, 4px);
+  }
+
+  .memory-sidebar__item-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2, 8px);
+  }
+
+  .memory-sidebar__time {
+    font-size: 11px;
+    color: var(--color-text-subtle, #555);
+    font-family: var(--font-mono, monospace);
+    flex-shrink: 0;
+  }
+
+  .memory-sidebar__content {
+    margin: 0;
+    font-size: var(--text-sm, 14px);
+    line-height: var(--leading-normal, 1.5);
+    color: var(--color-text, #e8e8e8);
+    word-break: break-word;
+  }
+
+  /* ── Badges ── */
+  .memory-sidebar__badge {
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+    border-radius: var(--radius-full, 9999px);
+    padding: 2px 8px;
+    flex-shrink: 0;
+  }
+
+  .memory-sidebar__badge--fact {
+    background: color-mix(in srgb, var(--color-info, #3b82f6) 18%, transparent);
+    color: var(--color-info, #3b82f6);
+  }
+
+  .memory-sidebar__badge--goal {
+    background: color-mix(in srgb, var(--color-accent, #6366f1) 18%, transparent);
+    color: var(--color-accent-hover, #818cf8);
+  }
+
+  .memory-sidebar__badge--preference {
+    background: color-mix(in srgb, var(--color-success, #22c55e) 18%, transparent);
+    color: var(--color-success, #22c55e);
+  }
+
+  .memory-sidebar__badge--context {
+    background: color-mix(in srgb, var(--color-warning, #f59e0b) 18%, transparent);
+    color: var(--color-warning, #f59e0b);
+  }
+
+  .memory-sidebar__badge--other {
+    background: color-mix(in srgb, var(--color-text-muted, #888) 18%, transparent);
+    color: var(--color-text-muted, #888);
+  }
+</style>

package/dist/app/MemorySidebar.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Memory } from "./MemorySidebar.types.js";
+interface Props {
+    memories: Memory[];
+    /** Custom CSS class. */
+    class?: string;
+}
+declare const MemorySidebar: import("svelte").Component<Props, {}, "">;
+type MemorySidebar = ReturnType<typeof MemorySidebar>;
+export default MemorySidebar;

package/dist/app/MemorySidebar.types.js

@@ -0,0 +1 @@
+export {};