@lupinum/ginko-docs 0.4.0-rc.9 → 0.4.0

package/app/components/content/PageMarkdownCopy.vue

@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import { Button } from "#ginko-docs/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "#ginko-docs/components/ui/dropdown-menu";
-import { computed } from "vue";
-import { useI18n } from "#imports";
-import { usePageMarkdownActions } from "#ginko-docs/composables/usePageMarkdownActions";
-
-const props = withDefaults(
-  defineProps<{
-    label?: string;
-    copiedLabel?: string;
-  }>(),
-  {},
-);
-
-const { t } = useI18n();
-const { actions, chatGptUrl, claudeUrl, copyMarkdown, copyValue, mcpUrl, rawPath, rawUrl, result } =
-  usePageMarkdownActions();
-const label = computed(() => props.label ?? t("docs.copyMarkdown"));
-const copiedLabel = computed(() => props.copiedLabel ?? t("docs.copied"));
-const markdownSucceeded = computed(
-  () => result.value?.action === "markdown" && result.value.status === "success",
-);
-const actionSucceeded = (action: "link" | "mcp") =>
-  result.value?.action === action && result.value.status === "success";
-const statusMessage = computed(() => {
-  if (!result.value) return "";
-  return result.value.status === "success" ? copiedLabel.value : t("docs.copyFailed");
-});
-</script>
-
-<template>
-  <div class="inline-flex shrink-0 items-center">
-    <Button
-      type="button"
-      variant="outline"
-      size="sm"
-      class="h-9 gap-1.5 rounded-r-none border-r-0 px-2.5 text-xs has-[>svg]:px-2.5"
-      :aria-label="markdownSucceeded ? copiedLabel : label"
-      @click="copyMarkdown"
-    >
-      <Icon
-        :name="markdownSucceeded ? 'lucide:check' : 'lucide:copy'"
-        class="size-3.5"
-        aria-hidden="true"
-      />
-      <span class="hidden sm:inline">{{ markdownSucceeded ? copiedLabel : label }}</span>
-    </Button>
-
-    <DropdownMenu>
-      <!-- No tooltip here: Tooltip is itself a popper root, so wrapping the
-           dropdown trigger steals its anchor and the menu renders off-screen. -->
-      <DropdownMenuTrigger as-child>
-        <Button
-          type="button"
-          variant="outline"
-          size="icon"
-          class="h-9 w-8 rounded-l-none px-0"
-          :aria-label="t('docs.moreActions')"
-        >
-          <Icon name="lucide:chevron-down" class="size-3.5" aria-hidden="true" />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" class="w-56">
-        <DropdownMenuItem @select="copyValue(rawUrl, 'link')">
-          <Icon :name="actionSucceeded('link') ? 'lucide:check' : 'lucide:link'" />
-          {{ actionSucceeded("link") ? t("docs.copied") : t("docs.copyLink") }}
-        </DropdownMenuItem>
-        <DropdownMenuItem as-child>
-          <a :href="rawPath" target="_blank" rel="noopener noreferrer">
-            <Icon name="lucide:file-code-2" />
-            {{ t("docs.viewMarkdown") }}
-          </a>
-        </DropdownMenuItem>
-        <DropdownMenuItem v-if="actions.claude" as-child>
-          <a :href="claudeUrl" target="_blank" rel="noopener noreferrer">
-            <Icon name="lucide:sparkles" />
-            {{ t("docs.askClaude") }}
-          </a>
-        </DropdownMenuItem>
-        <DropdownMenuItem v-if="actions.chatGpt" as-child>
-          <a :href="chatGptUrl" target="_blank" rel="noopener noreferrer">
-            <Icon name="lucide:message-circle" />
-            {{ t("docs.askChatGpt") }}
-          </a>
-        </DropdownMenuItem>
-        <template v-if="actions.mcp">
-          <DropdownMenuSeparator />
-          <DropdownMenuItem @select="copyValue(mcpUrl, 'mcp')">
-            <Icon :name="actionSucceeded('mcp') ? 'lucide:check' : 'lucide:plug'" />
-            {{ actionSucceeded("mcp") ? t("docs.copied") : t("docs.copyMcpUrl") }}
-          </DropdownMenuItem>
-        </template>
-      </DropdownMenuContent>
-    </DropdownMenu>
-    <span class="sr-only" role="status" aria-live="polite">{{ statusMessage }}</span>
-  </div>
-</template>

package/app/components/content/imageZoom.ts

@@ -1,25 +0,0 @@
-import { useReducedMotion } from "motion-v";
-import { computed } from "vue";
-
-export const imageZoomTransition = {
-  type: "spring",
-  bounce: 0,
-  duration: 0.42,
-  ease: "easeInOut",
-} as const;
-
-const imageZoomFadeTransition = { duration: 0.16, ease: "easeOut" } as const;
-const noMotionTransition = { duration: 0 } as const;
-
-export function useImageZoomMotion() {
-  const reducedMotion = useReducedMotion();
-
-  return {
-    imageTransition: computed(() =>
-      reducedMotion.value ? noMotionTransition : imageZoomTransition,
-    ),
-    fadeTransition: computed(() =>
-      reducedMotion.value ? noMotionTransition : imageZoomFadeTransition,
-    ),
-  };
-}

package/app/components/mdc/MdcAccordion.vue

@@ -1,67 +0,0 @@
-<script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { AccordionRoot } from "reka-ui";
-import { cn } from "../../utils";
-import { useProseAppearance } from "../../composables/useProseAppearance";
-
-const props = withDefaults(
-  defineProps<{
-    type?: "single" | "multiple";
-    collapsible?: boolean;
-    defaultValue?: string | string[];
-    class?: string;
-    appearance?: "quiet" | "tint";
-  }>(),
-  {
-    type: "single",
-    collapsible: true,
-  },
-);
-const appearance = useProseAppearance("accordion", () => props.appearance);
-
-const root = ref<HTMLElement | null>(null);
-const value = ref<string | string[]>(
-  props.type === "multiple"
-    ? ((props.defaultValue as string[]) ?? [])
-    : ((props.defaultValue as string) ?? ""),
-);
-
-function applyHash(hash: string) {
-  if (!hash || !root.value) return;
-  const target = root.value.querySelector<HTMLElement>(`#${CSS.escape(hash)}`);
-  if (!target) return;
-
-  const accordionValue =
-    target.dataset.accordionValue ??
-    target.closest("[data-accordion-value]")?.getAttribute("data-accordion-value");
-  if (!accordionValue) return;
-
-  if (props.type === "multiple") {
-    const current = Array.isArray(value.value) ? value.value : [];
-    value.value = current.includes(accordionValue) ? current : [accordionValue, ...current];
-    return;
-  }
-
-  value.value = accordionValue;
-}
-
-onMounted(() => {
-  applyHash(window.location.hash.slice(1));
-});
-</script>
-
-<template>
-  <div ref="root">
-    <AccordionRoot
-      v-model="value"
-      :type="props.type"
-      :collapsible="props.collapsible"
-      :unmount-on-hide="false"
-      data-slot="accordion"
-      :data-appearance="appearance"
-      :class="cn('content-accordion not-prose', props.class)"
-    >
-      <slot />
-    </AccordionRoot>
-  </div>
-</template>

package/app/components/mdc/MdcAccordionItem.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { useId } from "vue";
-import { AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger } from "reka-ui";
-
-const props = defineProps<{
-  value?: string;
-  title?: string;
-  content?: string;
-}>();
-
-const autoValue = useId();
-</script>
-
-<template>
-  <AccordionItem
-    :value="props.value || autoValue"
-    :data-accordion-value="props.value || autoValue"
-    class="content-accordion-item"
-  >
-    <AccordionHeader class="content-accordion-header">
-      <AccordionTrigger class="content-accordion-trigger">
-        <slot name="title">
-          {{ title }}
-        </slot>
-        <Icon name="lucide:chevron-down" class="content-accordion-chevron" aria-hidden="true" />
-      </AccordionTrigger>
-    </AccordionHeader>
-    <AccordionContent
-      data-slot="accordion-content"
-      class="content-accordion-content accordion-content"
-    >
-      <slot name="content">
-        <div v-if="content" class="content-accordion-copy">
-          {{ content }}
-        </div>
-      </slot>
-      <div v-if="$slots.default" class="content-accordion-copy content-prose content-prose-trim">
-        <slot unwrap="p" />
-      </div>
-    </AccordionContent>
-  </AccordionItem>
-</template>

package/app/components/mdc/MdcApi.vue

@@ -1,159 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref, useId } from "vue";
-import { cn } from "../../utils";
-import { apiEntryId, normalizeApiGroups, signatureTail, splitInlineCode } from "./api.utils";
-import { resolveIconifyIcon } from "./icons";
-import { useProseAppearance } from "../../composables/useProseAppearance";
-
-const props = defineProps<{
-  title?: string;
-  icon?: string;
-  method?: string;
-  path?: string;
-  groups?: unknown;
-  appearance?: "quiet" | "tint";
-}>();
-const appearance = useProseAppearance("api", () => props.appearance);
-
-const groups = computed(() => normalizeApiGroups(props.groups));
-const activeIndex = ref(0);
-const panelId = useId();
-
-const iconName = computed(() => resolveIconifyIcon(props.icon));
-
-function handleKeydown(event: KeyboardEvent, currentIndex: number) {
-  let nextIndex: number | undefined;
-  if (event.key === "ArrowRight") nextIndex = (currentIndex + 1) % groups.value.length;
-  if (event.key === "ArrowLeft") {
-    nextIndex = (currentIndex - 1 + groups.value.length) % groups.value.length;
-  }
-  if (event.key === "Home") nextIndex = 0;
-  if (event.key === "End") nextIndex = groups.value.length - 1;
-  if (nextIndex === undefined) return;
-
-  event.preventDefault();
-  activeIndex.value = nextIndex;
-  const tabs = (event.currentTarget as HTMLElement).parentElement?.querySelectorAll<HTMLElement>(
-    '[role="tab"]',
-  );
-  tabs?.[nextIndex]?.focus();
-}
-
-function applyHash(hash: string) {
-  if (!hash) return;
-  const index = groups.value.findIndex((group) =>
-    group.entries.some((entry) => apiEntryId(group.label, entry.name) === hash),
-  );
-  if (index === -1) return;
-  activeIndex.value = index;
-  requestAnimationFrame(() => {
-    document.getElementById(hash)?.scrollIntoView();
-  });
-}
-
-onMounted(() => {
-  applyHash(window.location.hash.slice(1));
-});
-</script>
-
-<template>
-  <div
-    v-if="groups.length"
-    class="content-api content-tabs not-prose"
-    :data-appearance="appearance"
-    :data-stacked-header="groups.length > 1 ? 'true' : undefined"
-  >
-    <div class="content-tabs-header content-api-header">
-      <span v-if="method && path" class="content-api-identity">
-        <span class="content-api-method">
-          {{ method.toUpperCase() }}
-        </span>
-        <span class="content-api-path">{{ path }}</span>
-      </span>
-      <span v-else-if="title" class="content-api-identity content-api-title">
-        <Icon
-          v-if="iconName"
-          :name="iconName"
-          mode="svg"
-          class="content-api-title-icon"
-          aria-hidden="true"
-        />
-        <span class="content-api-path">{{ title }}</span>
-      </span>
-
-      <div class="content-tabs-list content-api-tabs" role="tablist">
-        <button
-          v-for="(group, index) in groups"
-          :key="group.label"
-          type="button"
-          role="tab"
-          :id="`${panelId}-tab-${index}`"
-          :aria-selected="activeIndex === index"
-          :aria-controls="`${panelId}-${index}`"
-          :tabindex="activeIndex === index ? 0 : -1"
-          :class="cn('content-tabs-tab', activeIndex === index && 'content-tabs-tab-active')"
-          @click="activeIndex = index"
-          @keydown="handleKeydown($event, index)"
-        >
-          {{ group.label }}
-          <span class="content-api-count">
-            {{ group.entries.length }}
-          </span>
-        </button>
-      </div>
-    </div>
-
-    <div class="content-tabs-panels">
-      <div
-        v-for="(group, index) in groups"
-        :id="`${panelId}-${index}`"
-        :key="group.label"
-        role="tabpanel"
-        :aria-labelledby="`${panelId}-tab-${index}`"
-        :style="activeIndex === index ? undefined : { display: 'none' }"
-      >
-        <div
-          v-for="entry in group.entries"
-          :id="apiEntryId(group.label, entry.name)"
-          :key="entry.name"
-          class="content-api-row"
-          style="scroll-margin-top: var(--content-scroll-margin)"
-        >
-          <code class="content-api-signature" :data-entry="entry.name">
-            <span
-              :class="cn('content-api-name', entry.deprecated && 'content-api-name-deprecated')"
-              >{{ entry.name }}</span
-            ><span v-if="signatureTail(entry)" class="content-api-type">{{
-              signatureTail(entry)
-            }}</span>
-          </code>
-
-          <span v-if="entry.required || entry.deprecated || entry.since" class="content-api-badges">
-            <span v-if="entry.required" class="content-api-badge" data-state="required">
-              required
-            </span>
-            <span v-if="entry.deprecated" class="content-api-badge" data-state="deprecated">
-              deprecated
-            </span>
-            <span v-if="entry.since" class="content-api-badge" data-state="since">
-              since {{ entry.since }}
-            </span>
-          </span>
-
-          <!-- A div, not a p: the prose stylesheet's unlayered `.content-prose p`
-            rules (1rem margins, inherited 1rem/1.75 type) override layered
-            utilities and are not guarded by not-prose. -->
-          <div v-if="entry.description" class="content-api-description">
-            <template
-              v-for="(part, partIndex) in splitInlineCode(entry.description)"
-              :key="partIndex"
-            >
-              <code v-if="part.code" class="content-api-inline-code">{{ part.text }}</code
-              ><template v-else>{{ part.text }}</template>
-            </template>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

package/app/components/mdc/MdcAside.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { useProseAppearance } from "../../composables/useProseAppearance";
-import { cn } from "../../utils";
-
-const props = defineProps<{
-  label?: string;
-  appearance?: "quiet" | "tint";
-  class?: HTMLAttributes["class"];
-}>();
-const appearance = useProseAppearance("aside", () => props.appearance);
-</script>
-
-<template>
-  <aside :data-appearance="appearance" :class="cn('content-aside not-prose', props.class)">
-    <p v-if="label" class="content-aside-label">
-      {{ label }}
-    </p>
-    <div class="content-aside-body content-prose content-prose-trim">
-      <slot />
-    </div>
-  </aside>
-</template>

package/app/components/mdc/MdcCallout.vue

@@ -1,61 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { computed } from "vue";
-import { useProseAppearance } from "../../composables/useProseAppearance";
-import { cn } from "../../utils";
-import { resolveIconifyIcon } from "./icons";
-
-type CalloutType = "note" | "info" | "warning" | "error" | "success" | "idea";
-
-const props = withDefaults(
-  defineProps<{
-    title?: string;
-    type?: CalloutType;
-    icon?: string;
-    appearance?: "quiet" | "tint";
-    class?: HTMLAttributes["class"];
-  }>(),
-  {
-    type: "info",
-  },
-);
-
-const appearance = useProseAppearance("callout", () => props.appearance);
-
-const iconName = computed(() => {
-  if (props.icon) return resolveIconifyIcon(props.icon) ?? props.icon;
-
-  return (
-    {
-      note: "lucide:file-text",
-      info: "lucide:info",
-      warning: "lucide:triangle-alert",
-      error: "lucide:circle-x",
-      success: "lucide:circle-check",
-      idea: "lucide:lightbulb",
-    }[props.type] ?? "lucide:info"
-  );
-});
-</script>
-
-<template>
-  <div
-    data-slot="alert"
-    :data-appearance="appearance"
-    role="note"
-    :class="cn('content-callout not-prose my-4', `content-callout-${props.type}`, props.class)"
-  >
-    <span class="content-callout-bar" aria-hidden="true" />
-    <span data-slot="alert-icon" class="content-callout-icon" aria-hidden="true">
-      <Icon :name="iconName" />
-    </span>
-    <div class="content-callout-body">
-      <div v-if="title" data-slot="alert-title" class="content-alert-title">
-        {{ title }}
-      </div>
-      <div data-slot="alert-description" class="content-prose content-prose-trim">
-        <slot unwrap="p" />
-      </div>
-    </div>
-  </div>
-</template>

package/app/components/mdc/MdcCard.vue

@@ -1,175 +0,0 @@
-<script setup lang="ts">
-import { NuxtLink } from "#components";
-import {
-  computed,
-  inject,
-  useSlots,
-  type ComputedRef,
-  type CSSProperties,
-  type HTMLAttributes,
-} from "vue";
-import { cn } from "../../utils";
-import { isExternalLink, resolveIconifyIcon } from "./icons";
-import { useProseAppearance } from "../../composables/useProseAppearance";
-
-type CardIconColor =
-  | "muted"
-  | "foreground"
-  | "primary"
-  | "info"
-  | "success"
-  | "warning"
-  | "destructive";
-
-const props = withDefaults(
-  defineProps<{
-    title?: string;
-    description?: string;
-    footer?: string;
-    to?: string;
-    target?: string;
-    icon?: string;
-    iconColor?: CardIconColor;
-    img?: string;
-    showLinkIcon?: boolean;
-    horizontal?: boolean;
-    inStack?: boolean;
-    class?: HTMLAttributes["class"];
-    appearance?: "quiet" | "tint";
-  }>(),
-  {
-    showLinkIcon: true,
-    horizontal: false,
-    inStack: false,
-  },
-);
-
-const slots = useSlots();
-const inGroup = inject("contentCardInGroup", false);
-// Instance prop wins, then the surrounding ::cards tray, then config.
-const groupAppearance = inject<ComputedRef<"quiet" | "tint"> | null>(
-  "contentCardsAppearance",
-  null,
-);
-const appearance = useProseAppearance("cards", () => props.appearance ?? groupAppearance?.value);
-
-const wrapperTag = computed(() => (props.to ? (isExternalLink(props.to) ? "a" : NuxtLink) : "div"));
-
-const linkProps = computed(() => {
-  if (!props.to) return null;
-  if (isExternalLink(props.to)) {
-    return {
-      href: props.to,
-      target: props.target,
-      rel: "noreferrer noopener",
-    };
-  }
-  return {
-    to: props.to,
-    target: props.target,
-  };
-});
-
-const iconName = computed(() => resolveIconifyIcon(props.icon));
-
-const hasHeader = computed(() =>
-  Boolean(props.title || props.description || slots.title || slots.description || props.icon),
-);
-
-const hasFooter = computed(() => Boolean(props.footer || slots.footer));
-
-const hasBody = computed(() => Boolean(slots.default));
-
-const showOutgoingLinkIcon = computed(
-  () => props.showLinkIcon && Boolean(props.to && isExternalLink(props.to)),
-);
-
-const cardIconColor = computed(() => {
-  if (!props.iconColor || props.iconColor === "muted") return undefined;
-
-  return {
-    foreground: "var(--foreground)",
-    primary: "var(--primary)",
-    info: "var(--info)",
-    success: "var(--success)",
-    warning: "var(--warning)",
-    destructive: "var(--destructive)",
-  }[props.iconColor];
-});
-
-const cardIconStyle = computed<CSSProperties | undefined>(() =>
-  cardIconColor.value
-    ? ({ "--content-card-icon-color": cardIconColor.value } as CSSProperties)
-    : undefined,
-);
-</script>
-
-<template>
-  <component
-    :is="wrapperTag"
-    v-bind="linkProps || {}"
-    :data-appearance="appearance"
-    :class="
-      cn(
-        'content-card group not-prose',
-        !inStack && !inGroup && 'content-card-standalone',
-        inStack && 'content-card-in-stack',
-        to && 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none',
-        props.class,
-      )
-    "
-  >
-    <div data-slot="card" class="content-card-surface">
-      <img v-if="img" :src="img" alt="" class="content-card-media" />
-
-      <div
-        v-if="hasHeader"
-        class="content-card-header"
-        :data-trailing="hasBody || hasFooter ? 'true' : undefined"
-        :data-horizontal="horizontal ? 'true' : undefined"
-        :data-reserve-link-icon="showOutgoingLinkIcon ? 'true' : undefined"
-      >
-        <div
-          v-if="iconName"
-          v-bind="cardIconStyle ? { style: cardIconStyle } : {}"
-          class="content-card-icon content-card-tile"
-        >
-          <Icon :name="iconName" aria-hidden="true" />
-        </div>
-
-        <div class="content-card-copy">
-          <div v-if="title || $slots.title" data-slot="card-title" class="content-card-title">
-            <slot name="title">{{ title }}</slot>
-          </div>
-          <div
-            v-if="description || $slots.description"
-            data-slot="card-description"
-            class="content-card-description"
-          >
-            <slot name="description">{{ description }}</slot>
-          </div>
-        </div>
-      </div>
-
-      <div
-        v-if="hasBody"
-        data-slot="card-content"
-        class="content-card-body content-prose content-prose-trim"
-        :data-reserve-link-icon="showOutgoingLinkIcon && !hasHeader ? 'true' : undefined"
-      >
-        <slot unwrap="p" />
-      </div>
-
-      <div v-if="hasFooter" data-slot="card-footer" class="content-card-footer">
-        <slot name="footer">{{ footer }}</slot>
-      </div>
-
-      <Icon
-        v-if="showOutgoingLinkIcon"
-        name="lucide:arrow-up-right"
-        class="content-card-arrow"
-        aria-hidden="true"
-      />
-    </div>
-  </component>
-</template>

package/app/components/mdc/MdcCards.vue

@@ -1,30 +0,0 @@
-<script setup lang="ts">
-import { computed, provide, type HTMLAttributes } from "vue";
-import { useProseAppearance } from "../../composables/useProseAppearance";
-import { cn } from "../../utils";
-
-const props = withDefaults(
-  defineProps<{
-    cols?: 1 | 2 | 3 | "1" | "2" | "3";
-    appearance?: "quiet" | "tint";
-    class?: HTMLAttributes["class"];
-  }>(),
-  { cols: 2 },
-);
-
-provide("contentCardInGroup", true);
-const appearance = useProseAppearance("cards", () => props.appearance);
-// Children must render on the same surface as the tray they sit in.
-provide("contentCardsAppearance", appearance);
-const columns = computed(() => Math.min(3, Math.max(1, Number(props.cols) || 2)));
-</script>
-
-<template>
-  <div
-    :class="cn('content-cards not-prose', props.class)"
-    :data-appearance="appearance"
-    :data-columns="columns"
-  >
-    <slot />
-  </div>
-</template>