@baybreezy/docd 0.0.1

package/app/components/content/prose/ProseCodeCopy.global.vue

@@ -0,0 +1,67 @@
+<template>
+  <UiTooltip>
+    <UiTooltipTrigger as-child>
+      <UiButton
+        variant="ghost"
+        size="icon-xs"
+        :aria-label="copied ? 'Copied' : 'Copy to clipboard'"
+        :disabled="copied"
+        v-bind="$attrs"
+        @click="onCopy"
+      >
+        <AnimatePresence mode="wait">
+          <Motion
+            v-if="!copied"
+            as-child
+            as="svg"
+            :initial="{ opacity: 0, scale: 0.8 }"
+            :animate="{ opacity: 1, scale: 1 }"
+            :exit="{ opacity: 0, scale: 0.8 }"
+            :transition="{ duration: 0.2 }"
+          >
+            <Icon name="lucide:clipboard" aria-hidden="true" class="size-4 text-muted-foreground" />
+          </Motion>
+          <Motion
+            v-if="copied"
+            as-child
+            as="svg"
+            :initial="{ opacity: 0, scale: 0.8 }"
+            :animate="{ opacity: 1, scale: 1 }"
+            :exit="{ opacity: 0, scale: 0.8 }"
+            :transition="{ duration: 0.2 }"
+          >
+            <Icon name="lucide:check" aria-hidden="true" class="size-4 text-emerald-500" />
+          </Motion>
+        </AnimatePresence>
+      </UiButton>
+    </UiTooltipTrigger>
+    <UiTooltipContent>
+      <p>Copy to clipboard</p>
+      <UiTooltipArrow />
+    </UiTooltipContent>
+  </UiTooltip>
+</template>
+
+<script lang="ts" setup>
+  const props = defineProps<{
+    /**
+     * The code that should be copied
+     */
+    code?: string;
+  }>();
+
+  defineOptions({ inheritAttrs: false });
+
+  const { copied, copy } = useClipboard();
+
+  const emit = defineEmits<{
+    codeCopied: [];
+  }>();
+
+  const onCopy = () => {
+    if (!props.code) return;
+    copy(props.code);
+    useSonner("Copied to clipboard!");
+    emit("codeCopied");
+  };
+</script>

package/app/components/content/prose/ProseCodeGroup.global.vue

@@ -0,0 +1,104 @@
+<template>
+  <ClientOnly>
+    <render />
+  </ClientOnly>
+</template>
+
+<script setup lang="ts">
+  import { normalizeClass } from "vue";
+  import type { SetupContext } from "vue";
+
+  import { ProseTabs } from "#components";
+
+  const props = withDefaults(
+    defineProps<{
+      /**
+       * Whether the code group is in a stack layout
+       * @default false
+       */
+      inStack?: boolean;
+      /**
+       * Sync identifier for syncing with other tab groups
+       */
+      sync?: string;
+      /**
+       * Whether to add padding around the tabs
+       * @default true
+       */
+      padded?: boolean;
+      /**
+       * Disable the search functionality
+       * @default false
+       */
+      disableSearch?: boolean;
+      /**
+       * Placeholder text for the search input
+       * @default 'Search Tab...'
+       */
+      searchPlaceholder?: string;
+      /**
+       * Text to display when no tab is found
+       * @default 'No tab found.'
+       */
+      searchEmpty?: string;
+      /**
+       * Whether the combobox should take the full width of the container
+       * @default false
+       */
+      comboBoxFullWidth?: boolean;
+      /**
+       * Additional classes to add to the wrapper
+       */
+      class?: string;
+    }>(),
+    {
+      inStack: false,
+      padded: true,
+      disableSearch: false,
+      searchPlaceholder: "Search Tab...",
+      searchEmpty: "No tab found.",
+      comboBoxFullWidth: false,
+    }
+  );
+
+  const _slots: SetupContext["slots"] = useSlots();
+  const { items: slotItems } = useDefaultSlotItems({
+    slots: _slots,
+    mapMeta: ({ props, index }) => ({
+      id: props.filename ?? `tab-${index}`,
+      label: props.label ?? props.filename ?? `Tab ${index + 1}`,
+      icon: props.icon,
+    }),
+  });
+
+  const isMobile = useMediaQuery("(max-width: 640px)", {
+    ssrWidth: 639,
+  });
+
+  // Determine the variant based on number of tabs and screen size
+  // If there are 5 or more tabs, use the combobox variant
+  // If on mobile and more than 4 tabs, use the combobox variant
+  const variant = computed(() => {
+    if (slotItems.value.length >= 5) return "combobox";
+    if (isMobile.value && slotItems.value.length > 4) return "combobox";
+    return "card";
+  });
+
+  function render() {
+    return h(
+      ProseTabs,
+      {
+        variant: variant.value,
+        inStack: props.inStack,
+        sync: props.sync,
+        padded: props.padded,
+        disableSearch: props.disableSearch,
+        searchPlaceholder: props.searchPlaceholder,
+        searchEmpty: props.searchEmpty,
+        comboBoxFullWidth: props.comboBoxFullWidth,
+        class: normalizeClass(props.class) || undefined,
+      },
+      () => slotItems.value.map(({ vnode }) => vnode)
+    );
+  }
+</script>

package/app/components/content/prose/ProseCodeTree.global.vue

@@ -0,0 +1,277 @@
+<template>
+  <define-tree-child v-slot="{ items: childItems, level }">
+    <li v-for="item in childItems" :key="item.path">
+      <TreeItem v-slot="{ isExpanded, isSelected }" as-child :level="level" :value="item">
+        <button
+          type="button"
+          :aria-expanded="item.children?.length ? isExpanded : undefined"
+          :aria-label="item.children?.length ? `${item.label} folder` : `${item.label} file`"
+          class="inline-flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
+          :class="[
+            isSelected || lastSelectedItem?.path === item.path ? 'bg-muted text-primary' : '',
+          ]"
+        >
+          <!-- Folder/File Icon -->
+          <img
+            v-if="item.children?.length"
+            :src="getMaterialFolderIcon(item.label, isExpanded)"
+            :alt="`${item.label} folder ${isExpanded ? 'expanded' : 'collapsed'}`"
+            class="size-4 shrink-0"
+          />
+          <img
+            v-else
+            :src="getMaterialFileIcon(item.label)"
+            :alt="`${item.label} file`"
+            class="size-4 shrink-0"
+          />
+
+          <!-- Label -->
+          <span class="truncate">{{ item.label }}</span>
+
+          <!-- Chevron for folders -->
+          <Icon
+            v-if="item.children?.length"
+            name="lucide:chevron-down"
+            class="ml-auto size-4 shrink-0 text-muted-foreground transition-transform"
+            :class="[isExpanded ? 'rotate-0' : '-rotate-90']"
+            aria-hidden="true"
+          />
+        </button>
+
+        <!-- Nested children -->
+        <ul v-if="item.children?.length && isExpanded" role="group" class="pl-4">
+          <TreeChild :items="item.children" :level="level + 1" />
+        </ul>
+      </TreeItem>
+    </li>
+  </define-tree-child>
+
+  <div
+    data-slot="prose-code-tree"
+    class="grid overflow-hidden rounded-lg border lg:grid-cols-3"
+    :class="props.class"
+  >
+    <nav class="not-prose h-full overflow-hidden px-2" aria-label="File tree navigation">
+      <template v-if="props.title">
+        <div class="p-2 py-4 text-sm font-medium">
+          <span>
+            {{ props.title }}
+          </span>
+        </div>
+        <UiGradientDivider />
+      </template>
+      <!-- Tree Navigation -->
+      <div class="max-h-[520px] overflow-y-auto py-2">
+        <TreeRoot
+          v-model="selectedItem"
+          :items="treeItems"
+          :get-key="(item) => item.path"
+          :default-expanded="expandedPaths"
+        >
+          <ul class="space-y-1" role="tree">
+            <TreeChild :items="treeItems" :level="0" />
+          </ul>
+        </TreeRoot>
+      </div>
+    </nav>
+
+    <!-- Content Display -->
+    <div
+      class="grid min-h-[240px] grid-cols-1 lg:col-span-2"
+      role="region"
+      aria-label="File content"
+      aria-live="polite"
+    >
+      <component
+        :is="lastSelectedItem?.component"
+        v-if="lastSelectedItem"
+        meta="noFormat"
+        class="mt-0 data-[slot=prose-pre-wrapper]:h-full data-[slot=prose-pre-wrapper]:rounded-none data-[slot=prose-pre-wrapper]:border-0 data-[slot=prose-pre-wrapper]:border-t lg:data-[slot=prose-pre-wrapper]:border-t-0 lg:data-[slot=prose-pre-wrapper]:border-l [&_pre]:h-[calc(100%-45px)] [&_pre]:flex-1 [&>*:first-child]:mt-0"
+      />
+      <div v-else class="flex h-full items-center justify-center text-sm text-muted-foreground">
+        Select a file to view its content
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { getMaterialFileIcon, getMaterialFolderIcon } from "@baybreezy/file-extension-icon";
+  import type { HTMLAttributes } from "vue";
+
+  /**
+   * TreeItem represents a node in the file tree structure
+   */
+  type TreeItem = {
+    /** Display label for the node */
+    label: string;
+    /** Full path from root */
+    path: string;
+    /** Child nodes (only for directories) */
+    children?: TreeItem[];
+    /** Vue component to render when selected (only for files) */
+    component?: any;
+  };
+
+  const props = withDefaults(
+    defineProps<{
+      /**
+       * Default file path to select on mount
+       * @example "src/components/Button.vue"
+       */
+      defaultValue?: string;
+      /**
+       * Expand all directories by default instead of just the path to defaultValue
+       * @default false
+       */
+      expandAll?: boolean;
+      /**
+       * Optional title displayed above the file tree
+       * @example "Project Structure"
+       */
+      title?: string;
+      /**
+       * Additional CSS classes for the root container
+       */
+      class?: HTMLAttributes["class"];
+    }>(),
+    {
+      defaultValue: undefined,
+      expandAll: false,
+    }
+  );
+
+  const [DefineTreeChild, TreeChild] = createReusableTemplate<{
+    items: TreeItem[];
+    level: number;
+  }>();
+
+  const selectedItem = ref<TreeItem>();
+  const lastSelectedItem = ref<TreeItem>();
+  const rerenderCount = ref(0);
+
+  // Get slot items from default slot - these are the code blocks passed as children
+  const { items: slotItems } = useDefaultSlotItems({
+    slots: useSlots(),
+    mapMeta: ({ props, vnode }) => ({
+      path: props.path || props.filename || props.label,
+      icon: props.icon,
+      component: vnode,
+    }),
+  });
+
+  /**
+   * Build hierarchical tree structure from flat slot items
+   * Converts flat file paths like "src/components/Button.vue" into nested tree nodes
+   */
+  const treeItems = computed(() => {
+    // Trigger rerender when slots change
+    void rerenderCount.value;
+
+    const flatItems = slotItems.value.map((item) => ({
+      label: item.meta.path,
+      icon: item.meta.icon,
+      component: item.meta.component,
+    }));
+
+    return buildTree(flatItems);
+  });
+
+  /**
+   * Build tree structure from flat file paths
+   * Automatically creates parent directory nodes and sorts alphabetically
+   */
+  function buildTree(items: { label: string; icon?: string; component?: any }[]): TreeItem[] {
+    const map = new Map<string, TreeItem>();
+    const root: TreeItem[] = [];
+
+    items.forEach((item) => {
+      const parts = item.label.split("/");
+      let path = "";
+
+      parts.forEach((part, i) => {
+        path = path ? `${path}/${part}` : part;
+
+        if (!map.has(path)) {
+          const isLeaf = i === parts.length - 1;
+          const node: TreeItem = {
+            label: part,
+            path,
+            ...(isLeaf ? { component: item.component, icon: item.icon } : { children: [] }),
+          };
+
+          map.set(path, node);
+
+          if (i === 0) {
+            root.push(node);
+          } else {
+            const parentPath = parts.slice(0, i).join("/");
+            map.get(parentPath)?.children?.push(node);
+          }
+        }
+      });
+    });
+
+    // Sort function
+    const sort = (nodes: TreeItem[]): TreeItem[] =>
+      nodes
+        .sort((a, b) =>
+          !!a.children === !!b.children ? a.label.localeCompare(b.label) : a.children ? -1 : 1
+        )
+        .map((n) => ({ ...n, children: n.children && sort(n.children) }));
+
+    return sort(root);
+  }
+
+  /**
+   * Calculate which paths should be expanded based on the selected item or expandAll prop
+   */
+  const expandedPaths = computed(() => {
+    if (props.expandAll) {
+      const allPaths = new Set<string>();
+      slotItems.value.forEach((item) => {
+        const parts = item.meta.path.split("/");
+        for (let i = 1; i < parts.length; i++) {
+          allPaths.add(parts.slice(0, i).join("/"));
+        }
+      });
+      return Array.from(allPaths);
+    }
+
+    const path = selectedItem.value?.path || props.defaultValue;
+    if (!path) return [];
+
+    const parts = path.split("/");
+    return parts.slice(0, -1).map((_, i) => parts.slice(0, i + 1).join("/"));
+  });
+
+  /**
+   * Watch for selection changes and update lastSelectedItem if a file (not folder) is selected
+   */
+  watch(selectedItem, (newVal) => {
+    if (newVal && !newVal.children?.length) {
+      lastSelectedItem.value = newVal;
+    }
+  });
+
+  /**
+   * Set initial selection on mount if defaultValue is provided
+   */
+  onMounted(() => {
+    if (props.defaultValue) {
+      const findItem = (items: TreeItem[]): TreeItem | undefined => {
+        for (const item of items) {
+          if (item.path === props.defaultValue) return item;
+          if (item.children) {
+            const found = findItem(item.children);
+            if (found) return found;
+          }
+        }
+      };
+      const initial = findItem(treeItems.value);
+      if (initial) {
+        selectedItem.value = initial;
+      }
+    }
+  });
+</script>

package/app/components/content/prose/ProseCollapsible.global.vue

@@ -0,0 +1,64 @@
+<template>
+  <UiCollapsible v-slot="{ open }" :default-open="defaultOpen" class="my-4">
+    <UiCollapsibleTrigger
+      class="group relative inline-flex items-center gap-1.5 rounded-xs text-sm text-muted-foreground transition-colors hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-primary"
+      :class="triggerClass"
+    >
+      <ProseSmartIcon v-if="open ? openIcon : closeIcon" :name="open ? openIcon! : closeIcon!" />
+      <span>{{ open ? closeTitle : openTitle }}</span>
+    </UiCollapsibleTrigger>
+    <UiCollapsibleContent :class="contentClass" class="*:my-1.5 *:first:mt-2 *:last:mb-0">
+      <slot />
+    </UiCollapsibleContent>
+  </UiCollapsible>
+</template>
+
+<script lang="ts">
+  import type { HTMLAttributes } from "vue";
+
+  export type ProseCollapsibleProps = {
+    /**
+     * Icon to show when collapsible is open
+     * @default "lucide:minus"
+     */
+    openIcon?: string;
+    /**
+     * Icon to show when collapsible is closed
+     * @default "lucide:plus"
+     */
+    closeIcon?: string;
+    /**
+     * Text to show when collapsible is closed (trigger to open)
+     * @default "Show more"
+     */
+    openTitle?: string;
+    /**
+     * Text to show when collapsible is open (trigger to close)
+     * @default "Show less"
+     */
+    closeTitle?: string;
+    /**
+     * Whether the collapsible should be open by default
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Additional CSS classes for the trigger button
+     */
+    triggerClass?: HTMLAttributes["class"];
+    /**
+     * Additional CSS classes for the content area
+     */
+    contentClass?: HTMLAttributes["class"];
+  };
+</script>
+
+<script lang="ts" setup>
+  withDefaults(defineProps<ProseCollapsibleProps>(), {
+    openIcon: "lucide:minus",
+    closeIcon: "lucide:plus",
+    openTitle: "Show more",
+    closeTitle: "Show less",
+    defaultOpen: false,
+  });
+</script>

package/app/components/content/prose/ProseColorModeImage.global.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="not-first:mt-6">
+    <div class="dark:hidden">
+      <ProseImg v-bind="forwarded" :src="srcLight" />
+    </div>
+    <div class="hidden dark:block">
+      <ProseImg v-bind="forwarded" :src="srcDark" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import type { HTMLAttributes } from "vue";
+
+  export type ProseColorModeImageProps = {
+    /**
+     * Source URL for light mode image
+     */
+    srcLight?: string;
+    /**
+     * Source URL for dark mode image
+     */
+    srcDark?: string;
+    /**
+     * Alt text for the image
+     */
+    alt?: string;
+    /**
+     * Width of the image
+     */
+    width?: string | number;
+    /**
+     * Height of the image
+     */
+    height?: string | number;
+    /**
+     * Whether the image should have a lifted style
+     */
+    lifted?: boolean;
+    /**
+     * Whether the image should have zoom effect on hover
+     * @default true
+     */
+    zoom?: boolean;
+    /**
+     * Additional CSS classes for the image element
+     */
+    class?: HTMLAttributes["class"];
+  };
+</script>
+
+<script setup lang="ts">
+  const props = withDefaults(defineProps<ProseColorModeImageProps>(), {
+    zoom: true,
+    lifted: false,
+  });
+  const forwarded = reactiveOmit(props, "srcLight", "srcDark");
+</script>

package/app/components/content/prose/ProseComponentApi.global.vue

@@ -0,0 +1,104 @@
+<template>
+  <div v-if="resolvedMeta" class="not-prose">
+    <div v-if="title" class="mb-4">
+      <p class="text-lg font-semibold tracking-tight text-foreground">{{ title }}</p>
+    </div>
+
+    <ProseTabs v-if="sectionCount > 1" :variant="tabsVariant">
+      <div
+        v-for="section in visibleSections"
+        :key="section.kind"
+        :label="section.label"
+        :icon="section.icon"
+        class="[&>*:first-child]:mt-0"
+      >
+        <component :is="section.component" :items="section.items" :layout="layout" />
+      </div>
+    </ProseTabs>
+
+    <div v-else-if="visibleSections[0]" class="space-y-6">
+      <component
+        :is="visibleSections[0]?.component"
+        :items="visibleSections[0].items"
+        :layout="layout"
+      />
+    </div>
+
+    <p v-else class="text-sm text-muted-foreground">
+      No matching component API sections were found.
+    </p>
+  </div>
+
+  <p v-else class="not-prose text-sm text-muted-foreground">
+    No component metadata was found for <code>{{ path }}</code
+    >.
+  </p>
+</template>
+
+<script lang="ts">
+  import type { ComponentApiSectionKind } from "../../../../utils/component-api";
+  import type {
+    ProseComponentApiLayout,
+    ProseComponentMetaEntry,
+  } from "../../../../utils/generate-prose-component-meta";
+  import type { ProseTabsProps } from "./ProseTabs.global.vue";
+
+  export type ProseComponentApiProps = {
+    path?: string;
+    meta?: ProseComponentMetaEntry | null;
+    layout?: ProseComponentApiLayout;
+    sections?: ComponentApiSectionKind[] | string;
+    title?: string;
+    tabsVariant?: ProseTabsProps["variant"];
+  };
+</script>
+
+<script lang="ts" setup>
+  import { normalizeComponentApiSections } from "../../../../utils/component-api";
+
+  const props = withDefaults(defineProps<ProseComponentApiProps>(), {
+    layout: "table",
+    tabsVariant: "line",
+  });
+
+  const resolvedMeta = computed(() => props.meta ?? resolveProseComponentMeta(props.path));
+  const requestedSections = computed(() => normalizeComponentApiSections(props.sections));
+  const sectionDefinitions = {
+    props: {
+      label: "Props",
+      icon: "lucide:sliders-horizontal",
+      component: "ProseComponentProps",
+    },
+    slots: {
+      label: "Slots",
+      icon: "lucide:panel-top",
+      component: "ProseComponentSlots",
+    },
+    events: {
+      label: "Events",
+      icon: "lucide:zap",
+      component: "ProseComponentEvents",
+    },
+    exposed: {
+      label: "Exposed",
+      icon: "lucide:square-function",
+      component: "ProseComponentExposed",
+    },
+  } as const;
+
+  const visibleSections = computed(() => {
+    if (!resolvedMeta.value) {
+      return [];
+    }
+
+    return requestedSections.value
+      .map((kind) => ({
+        kind,
+        ...sectionDefinitions[kind],
+        items: resolvedMeta.value?.[kind] || [],
+      }))
+      .filter((section) => section.items.length);
+  });
+
+  const sectionCount = computed(() => visibleSections.value.length);
+</script>

package/app/components/content/prose/ProseComponentEvents.global.vue

@@ -0,0 +1,27 @@
+<template>
+  <ComponentApiSection kind="events" :items="resolvedItems" :layout="layout" />
+</template>
+
+<script lang="ts">
+  import type {
+    ProseComponentApiLayout,
+    ProseComponentMetaEntry,
+    ProseComponentMetaEvent,
+  } from "../../../../utils/generate-prose-component-meta";
+
+  export type ProseComponentEventsProps = {
+    path?: string;
+    meta?: ProseComponentMetaEntry | null;
+    items?: ProseComponentMetaEvent[];
+    layout?: ProseComponentApiLayout;
+  };
+</script>
+
+<script lang="ts" setup>
+  const props = withDefaults(defineProps<ProseComponentEventsProps>(), {
+    layout: "field",
+  });
+
+  const resolvedMeta = computed(() => props.meta ?? resolveProseComponentMeta(props.path));
+  const resolvedItems = computed(() => props.items ?? resolvedMeta.value?.events ?? []);
+</script>