@abraca/nuxt 2.0.11 → 2.3.0

package/dist/runtime/components/registry/APluginDetail.vue

@@ -0,0 +1,252 @@
+<script setup>
+import { computed, onMounted, ref, watch } from "vue";
+import { useRuntimeConfig, useToast } from "#imports";
+import { usePluginCatalog } from "../../composables/usePluginCatalog";
+const props = defineProps({
+  id: { type: String, required: true },
+  serverUrl: { type: String, required: false }
+});
+const emit = defineEmits(["back", "installed"]);
+const registry = usePluginCatalog();
+const detail = ref(null);
+const latest = ref(null);
+const isLoading = ref(false);
+const error = ref(null);
+const showDialog = ref(false);
+const toast = useToast();
+const installed = computed(() => registry.isInstalled(props.id));
+const decision = computed(() => registry.policyDecisionFor(props.id));
+const cfg = useRuntimeConfig();
+const resolvedServerUrl = computed(() => {
+  if (props.serverUrl) return props.serverUrl;
+  const moduleUrl = cfg.public.abracadabra?.url;
+  const flatUrl = cfg.public.abracadabraUrl;
+  return moduleUrl ?? flatUrl ?? null;
+});
+async function load() {
+  isLoading.value = true;
+  error.value = null;
+  try {
+    const [d, l] = await Promise.all([
+      registry.get(props.id),
+      registry.getLatest(props.id)
+    ]);
+    detail.value = d;
+    latest.value = l;
+  } catch (e) {
+    error.value = e instanceof Error ? e : new Error(String(e));
+  } finally {
+    isLoading.value = false;
+  }
+}
+function startInstall() {
+  if (!latest.value) return;
+  showDialog.value = true;
+}
+async function confirmInstall(d) {
+  try {
+    await registry.install(d.plugin_id);
+    toast.add({
+      title: `${d.manifest.name ?? d.plugin_id} installed`,
+      description: `v${d.version}`,
+      color: "success"
+    });
+    emit("installed", d);
+  } catch (e) {
+    toast.add({ title: "Install failed", description: e.message, color: "error" });
+  }
+}
+async function refreshPolicy() {
+  if (!resolvedServerUrl.value) return;
+  try {
+    await registry.loadPolicy(resolvedServerUrl.value);
+  } catch {
+  }
+}
+onMounted(() => {
+  load();
+  refreshPolicy();
+});
+watch(() => props.id, load);
+watch(resolvedServerUrl, refreshPolicy);
+</script>
+
+<template>
+  <div class="flex h-full flex-col gap-4">
+    <div class="flex items-center gap-2">
+      <UButton
+        variant="ghost"
+        color="neutral"
+        icon="i-lucide-arrow-left"
+        size="sm"
+        @click="emit('back')"
+      />
+      <h2 class="truncate text-lg font-semibold text-highlighted">
+        {{ detail?.plugin.name ?? id }}
+      </h2>
+      <UBadge v-if="installed" color="success" variant="subtle" size="sm" icon="i-lucide-check" label="Installed" />
+    </div>
+
+    <div v-if="isLoading" class="flex flex-1 items-center justify-center text-sm text-muted">
+      Loading…
+    </div>
+
+    <div v-else-if="error" class="flex flex-1 flex-col items-center justify-center gap-2 text-center">
+      <UIcon name="i-lucide-alert-circle" class="text-2xl text-error" />
+      <p class="text-sm text-error">
+        {{ error.message }}
+      </p>
+      <UButton size="sm" variant="soft" label="Retry" @click="load" />
+    </div>
+
+    <div v-else-if="detail && latest" class="flex flex-1 flex-col gap-4 overflow-auto">
+      <div class="rounded-lg border border-default bg-default p-4">
+        <p class="font-mono text-xs text-muted">
+          {{ detail.plugin.id }} · v{{ latest.version }} · by {{ detail.plugin.owner_login ?? "\u2014" }}
+        </p>
+        <p class="mt-2 text-sm text-default">
+          {{ detail.plugin.description }}
+        </p>
+        <div class="mt-3 flex flex-wrap items-center gap-1.5">
+          <UBadge
+            v-for="cat in detail.plugin.categories"
+            :key="cat"
+            size="xs"
+            variant="outline"
+            color="neutral"
+          >
+            {{ cat }}
+          </UBadge>
+        </div>
+      </div>
+
+      <section>
+        <h3 class="mb-2 text-sm font-semibold text-highlighted">
+          Capabilities
+        </h3>
+        <div class="flex flex-wrap gap-1.5">
+          <UBadge
+            v-for="cap in latest.manifest.capabilities.required"
+            :key="`req-${cap}`"
+            size="sm"
+            color="primary"
+            variant="subtle"
+          >
+            {{ cap }}
+          </UBadge>
+          <UBadge
+            v-for="cap in latest.manifest.capabilities.optional ?? []"
+            :key="`opt-${cap}`"
+            size="sm"
+            color="neutral"
+            variant="outline"
+          >
+            {{ cap }}
+          </UBadge>
+        </div>
+      </section>
+
+      <section v-if="latest.manifest.contributes">
+        <h3 class="mb-2 text-sm font-semibold text-highlighted">
+          Contributes
+        </h3>
+        <dl class="space-y-1 text-sm">
+          <template
+            v-for="(items, field) in latest.manifest.contributes"
+            :key="field"
+          >
+            <div v-if="items && items.length > 0" class="flex gap-2">
+              <dt class="w-32 shrink-0 text-muted">
+                {{ field }}
+              </dt>
+              <dd class="flex flex-wrap gap-1">
+                <code
+                  v-for="item in items"
+                  :key="item"
+                  class="rounded bg-elevated px-1.5 py-0.5 font-mono text-xs"
+                >{{ item }}</code>
+              </dd>
+            </div>
+          </template>
+        </dl>
+      </section>
+
+      <section>
+        <h3 class="mb-2 text-sm font-semibold text-highlighted">
+          Versions
+        </h3>
+        <ul class="divide-y divide-default rounded-md border border-default">
+          <li
+            v-for="v in detail.versions"
+            :key="v.version"
+            class="flex items-center justify-between gap-2 px-3 py-2 text-sm"
+          >
+            <span class="font-mono">v{{ v.version }}</span>
+            <span class="font-mono text-xs text-muted">{{ v.integrity.slice(0, 16) }}…</span>
+            <UBadge
+              size="xs"
+              variant="subtle"
+              :color="v.status === 'live' ? 'success' : v.status === 'rejected' ? 'error' : 'neutral'"
+            >
+              {{ v.status }}
+            </UBadge>
+            <span class="text-xs text-muted">
+              {{ new Date(v.submitted_at).toLocaleDateString() }}
+            </span>
+          </li>
+        </ul>
+      </section>
+
+      <div class="sticky bottom-0 flex items-center justify-end gap-2 border-t border-default bg-default py-3">
+        <UButton
+          v-if="detail.plugin.repository"
+          variant="ghost"
+          color="neutral"
+          icon="i-lucide-external-link"
+          label="Repository"
+          :to="resolveRepoUrl(detail.plugin.repository)"
+          target="_blank"
+        />
+        <UButton
+          v-if="installed"
+          variant="soft"
+          color="success"
+          icon="i-lucide-check"
+          label="Installed"
+          disabled
+        />
+        <UBadge
+          v-else-if="decision.state === 'blocked'"
+          color="warning"
+          variant="subtle"
+          size="md"
+          icon="i-lucide-shield-alert"
+          :title="decision.reason"
+          :label="`Not allowed by your server`"
+        />
+        <UButton
+          v-else
+          :color="decision.state === 'allowed' ? 'success' : 'primary'"
+          :icon="decision.state === 'allowed' ? 'i-lucide-shield-check' : 'i-lucide-download'"
+          :label="decision.state === 'allowed' ? `Approved \u2014 install v${latest.version}` : `Install v${latest.version}`"
+          @click="startInstall"
+        />
+      </div>
+    </div>
+
+    <APluginCapabilityDialog
+      v-model="showDialog"
+      :detail="latest"
+      @confirm="confirmInstall"
+    />
+  </div>
+</template>
+
+<script>
+function resolveRepoUrl(repo) {
+  if (repo.startsWith("github:")) {
+    return `https://github.com/${repo.slice("github:".length)}`;
+  }
+  return repo;
+}
+</script>

package/dist/runtime/components/registry/APluginDetail.vue.d.ts

@@ -0,0 +1,18 @@
+import { type CatalogVersionDetail } from '../../composables/usePluginCatalog.js';
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{
+    id: string;
+    /** See `<APluginBrowser>` — same fallback chain. */
+    serverUrl?: string;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    installed: (detail: CatalogVersionDetail) => any;
+    back: () => any;
+}, string, import("vue").PublicProps, Readonly<{
+    id: string;
+    /** See `<APluginBrowser>` — same fallback chain. */
+    serverUrl?: string;
+}> & Readonly<{
+    onInstalled?: ((detail: CatalogVersionDetail) => any) | undefined;
+    onBack?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/renderers/ACodeRenderer.d.vue.ts

@@ -0,0 +1,15 @@
+import type { RendererBaseProps } from '../../composables/useRendererBase.js';
+type __VLS_Props = RendererBaseProps & {
+    editable?: boolean;
+    /** Optional initial meta hint — page-types pass `docMeta` through; we read `language`. */
+    docMeta?: Record<string, unknown>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    updateMeta: (patch: Record<string, unknown>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdateMeta?: ((patch: Record<string, unknown>) => any) | undefined;
+}>, {
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/renderers/ACodeRenderer.vue

@@ -0,0 +1,68 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { useRendererBase } from "../../composables/useRendererBase";
+import ACodeEditor from "../ACodeEditor.vue";
+const props = defineProps({
+  docId: { type: String, required: true },
+  childProvider: { type: null, required: true },
+  docLabel: { type: String, required: true },
+  pageTypes: { type: Array, required: false },
+  editable: { type: Boolean, required: false, default: true },
+  docMeta: { type: Object, required: false }
+});
+const emit = defineEmits(["updateMeta"]);
+const { childProviderRef, connectedUsers } = useRendererBase(props);
+const LANGUAGES = ["javascript", "typescript", "tsx", "jsx", "css", "vue", "json", "markdown", "plain"];
+const language = ref(props.docMeta?.language ?? "javascript");
+watch(() => props.docMeta?.language, (next) => {
+  const lang = next;
+  if (lang && LANGUAGES.includes(lang) && lang !== language.value) language.value = lang;
+});
+function selectLanguage(lang) {
+  if (lang === language.value) return;
+  language.value = lang;
+  if (props.editable) emit("updateMeta", { language: lang });
+}
+const languageItems = computed(() => LANGUAGES.map((l) => ({
+  label: l,
+  onSelect: () => selectLanguage(l)
+})));
+const _peers = computed(() => connectedUsers.value);
+</script>
+
+<template>
+  <div class="acoder">
+    <!-- Header strip: language picker + presence facepile -->
+    <div class="acoder__header">
+      <div class="acoder__heading">
+        <UIcon name="i-lucide-code-2" class="size-3.5 text-(--ui-text-muted)" />
+        <span class="acoder__label">{{ docLabel || "Untitled" }}</span>
+      </div>
+
+      <div class="acoder__tools">
+        <UDropdownMenu :items="languageItems" :content="{ side: 'bottom', align: 'end' }">
+          <UButton
+            size="xs"
+            variant="ghost"
+            color="neutral"
+            :label="language"
+            trailing-icon="i-lucide-chevron-down"
+            :disabled="!editable"
+          />
+        </UDropdownMenu>
+      </div>
+    </div>
+
+    <!-- Editor -->
+    <ACodeEditor
+      :provider="childProviderRef"
+      field-name="code"
+      :language="language"
+      :read-only="!editable"
+    />
+  </div>
+</template>
+
+<style scoped>
+.acoder{display:flex;flex:1 1 0;flex-direction:column;min-height:0;overflow:hidden}.acoder__header{align-items:center;background:var(--ui-bg);border-bottom:1px solid var(--ui-border);display:flex;flex-shrink:0;justify-content:space-between;padding:.375rem .75rem}.acoder__heading{align-items:center;display:flex;gap:.5rem;min-width:0}.acoder__label{color:var(--ui-text-highlighted);font-size:.75rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.acoder__tools{align-items:center;display:flex;gap:.25rem}
+</style>

package/dist/runtime/components/renderers/ACodeRenderer.vue.d.ts

@@ -0,0 +1,15 @@
+import type { RendererBaseProps } from '../../composables/useRendererBase.js';
+type __VLS_Props = RendererBaseProps & {
+    editable?: boolean;
+    /** Optional initial meta hint — page-types pass `docMeta` through; we read `language`. */
+    docMeta?: Record<string, unknown>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    updateMeta: (patch: Record<string, unknown>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onUpdateMeta?: ((patch: Record<string, unknown>) => any) | undefined;
+}>, {
+    editable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;