@rimelight/ui 0.0.6 → 0.0.8

package/src/integrations/ui.ts

@@ -1,11 +1,13 @@
 import type { AstroIntegration } from "astro"
+import vue from "@astrojs/vue"
+import uiPlugin from "@nuxt/ui/vite"
 import defu from "defu"
 import Icons from "unplugin-icons/vite"
+import tailwindcss from '@tailwindcss/vite'
 import { defaultUIConfig } from "../themes"
 
 /**
- * Shape of the `ui` config that can be passed to the integration. Keys are component names, values
- * are partial theme configs.
+ * Shape of the `ui` config that can be passed to the integration.
  */
 export type UIConfigOverrides = {
   button?: Partial<(typeof defaultUIConfig)["button"]>
@@ -42,33 +44,35 @@ export interface UIOptions {
  *     ]
  *   })
  */
-export function ui(options: UIOptions = {}): AstroIntegration {
-  // Merge user overrides with defaults (user-provided values win)
+export function ui(options: UIOptions = {}): AstroIntegration[] {
   const resolvedConfig = defu(options.ui ?? {}, defaultUIConfig)
 
   const virtualModuleId = "virtual:rimelight-ui"
   const resolvedVirtualModuleId = "\0" + virtualModuleId
 
-  return {
+  const rimelightUIIntegration: AstroIntegration = {
     name: "@rimelight/ui",
     hooks: {
       "astro:config:setup": ({ updateConfig, logger }) => {
-        logger.info("Initializing @rimelight/ui configuration")
+        logger.info("Initializing @rimelight/ui core")
 
         updateConfig({
           vite: {
             plugins: [
+              uiPlugin({
+                router: false,
+                scanPackages: ["@rimelight/ui"]
+              }),
               Icons({
                 compiler: "astro",
                 autoInstall: true
               }),
+              tailwindcss(),
               {
                 name: "vite-plugin-rimelight-ui-config",
                 enforce: "pre",
                 resolveId(id: string) {
-                  if (id === virtualModuleId) {
-                    return resolvedVirtualModuleId
-                  }
+                  if (id === virtualModuleId) return resolvedVirtualModuleId
                   return null
                 },
                 load(id: string) {
@@ -78,10 +82,17 @@ export function ui(options: UIOptions = {}): AstroIntegration {
                   return null
                 }
               }
-            ]
+            ] as any
           }
         })
       }
     }
   }
+
+  return [
+    vue({
+      appEntrypoint: "@rimelight/ui/integrations/vue-entrypoint"
+    }),
+    rimelightUIIntegration
+  ]
 }

package/src/integrations/vue-entrypoint.ts

@@ -0,0 +1,6 @@
+import type { App } from "vue"
+import ui from "@nuxt/ui/vue-plugin"
+
+export default (app: App) => {
+  app.use(ui)
+}

package/src/middleware/sri.ts

@@ -59,14 +59,14 @@ export const sri = defineMiddleware(async (_, next) => {
     const scriptRegex = new RegExp(`(<script[^>]+src=["']${url}["'][^>]*)(/?>)`, "g")
     modifiedHtml = modifiedHtml.replace(
       scriptRegex,
-      `$1 integrity="${String(hash)}" crossorigin="anonymous"$2`
+      `$1 integrity="${hash}" crossorigin="anonymous"$2`
     )
 
     // Look for link tags with the specific URL
     const linkRegex = new RegExp(`(<link[^>]+href=["']${url}["'][^>]*)(/?>)`, "g")
     modifiedHtml = modifiedHtml.replace(
       linkRegex,
-      `$1 integrity="${String(hash)}" crossorigin="anonymous"$2`
+      `$1 integrity="${hash}" crossorigin="anonymous"$2`
     )
   }
 

package/src/nuxt.ts

@@ -0,0 +1,125 @@
+// Components
+export { default as Accordion } from "@nuxt/ui/components/Accordion.vue";
+export { default as Alert } from "@nuxt/ui/components/Alert.vue";
+export { default as App } from "@nuxt/ui/components/App.vue";
+export { default as AuthForm } from "@nuxt/ui/components/AuthForm.vue";
+export { default as Avatar } from "@nuxt/ui/components/Avatar.vue";
+export { default as AvatarGroup } from "@nuxt/ui/components/AvatarGroup.vue";
+export { default as Badge } from "@nuxt/ui/components/Badge.vue";
+export { default as Banner } from "@nuxt/ui/components/Banner.vue";
+export { default as BlogPost } from "@nuxt/ui/components/BlogPost.vue";
+export { default as BlogPosts } from "@nuxt/ui/components/BlogPosts.vue";
+export { default as Breadcrumb } from "@nuxt/ui/components/Breadcrumb.vue";
+export { default as Button } from "@nuxt/ui/components/Button.vue";
+export { default as Calendar } from "@nuxt/ui/components/Calendar.vue";
+export { default as Card } from "@nuxt/ui/components/Card.vue";
+export { default as Carousel } from "@nuxt/ui/components/Carousel.vue";
+export { default as ChangelogVersion } from "@nuxt/ui/components/ChangelogVersion.vue";
+export { default as ChangelogVersions } from "@nuxt/ui/components/ChangelogVersions.vue";
+export { default as ChatMessage } from "@nuxt/ui/components/ChatMessage.vue";
+export { default as ChatMessages } from "@nuxt/ui/components/ChatMessages.vue";
+export { default as ChatPalette } from "@nuxt/ui/components/ChatPalette.vue";
+export { default as ChatPrompt } from "@nuxt/ui/components/ChatPrompt.vue";
+export { default as ChatPromptSubmit } from "@nuxt/ui/components/ChatPromptSubmit.vue";
+export { default as ChatReasoning } from "@nuxt/ui/components/ChatReasoning.vue";
+export { default as ChatShimmer } from "@nuxt/ui/components/ChatShimmer.vue";
+export { default as ChatTool } from "@nuxt/ui/components/ChatTool.vue";
+export { default as Checkbox } from "@nuxt/ui/components/Checkbox.vue";
+export { default as CheckboxGroup } from "@nuxt/ui/components/CheckboxGroup.vue";
+export { default as Chip } from "@nuxt/ui/components/Chip.vue";
+export { default as Collapsible } from "@nuxt/ui/components/Collapsible.vue";
+export { default as ColorPicker } from "@nuxt/ui/components/ColorPicker.vue";
+export { default as CommandPalette } from "@nuxt/ui/components/CommandPalette.vue";
+export { default as Container } from "@nuxt/ui/components/Container.vue";
+export { default as ContextMenu } from "@nuxt/ui/components/ContextMenu.vue";
+export { default as DashboardGroup } from "@nuxt/ui/components/DashboardGroup.vue";
+export { default as DashboardNavbar } from "@nuxt/ui/components/DashboardNavbar.vue";
+export { default as DashboardPanel } from "@nuxt/ui/components/DashboardPanel.vue";
+export { default as DashboardResizeHandle } from "@nuxt/ui/components/DashboardResizeHandle.vue";
+export { default as DashboardSearch } from "@nuxt/ui/components/DashboardSearch.vue";
+export { default as DashboardSearchButton } from "@nuxt/ui/components/DashboardSearchButton.vue";
+export { default as DashboardSidebar } from "@nuxt/ui/components/DashboardSidebar.vue";
+export { default as DashboardSidebarCollapse } from "@nuxt/ui/components/DashboardSidebarCollapse.vue";
+export { default as DashboardSidebarToggle } from "@nuxt/ui/components/DashboardSidebarToggle.vue";
+export { default as DashboardToolbar } from "@nuxt/ui/components/DashboardToolbar.vue";
+export { default as Drawer } from "@nuxt/ui/components/Drawer.vue";
+export { default as DropdownMenu } from "@nuxt/ui/components/DropdownMenu.vue";
+export { default as Editor } from "@nuxt/ui/components/Editor.vue";
+export { default as EditorDragHandle } from "@nuxt/ui/components/EditorDragHandle.vue";
+export { default as EditorEmojiMenu } from "@nuxt/ui/components/EditorEmojiMenu.vue";
+export { default as EditorMentionMenu } from "@nuxt/ui/components/EditorMentionMenu.vue";
+export { default as EditorSuggestionMenu } from "@nuxt/ui/components/EditorSuggestionMenu.vue";
+export { default as EditorToolbar } from "@nuxt/ui/components/EditorToolbar.vue";
+export { default as Empty } from "@nuxt/ui/components/Empty.vue";
+export { default as Error } from "@nuxt/ui/components/Error.vue";
+export { default as FieldGroup } from "@nuxt/ui/components/FieldGroup.vue";
+export { default as FileUpload } from "@nuxt/ui/components/FileUpload.vue";
+export { default as Footer } from "@nuxt/ui/components/Footer.vue";
+export { default as FooterColumns } from "@nuxt/ui/components/FooterColumns.vue";
+export { default as Form } from "@nuxt/ui/components/Form.vue";
+export { default as FormField } from "@nuxt/ui/components/FormField.vue";
+export { default as Header } from "@nuxt/ui/components/Header.vue";
+export { default as Icon } from "@nuxt/ui/components/Icon.vue";
+export { default as Input } from "@nuxt/ui/components/Input.vue";
+export { default as InputDate } from "@nuxt/ui/components/InputDate.vue";
+export { default as InputMenu } from "@nuxt/ui/components/InputMenu.vue";
+export { default as InputNumber } from "@nuxt/ui/components/InputNumber.vue";
+export { default as InputTags } from "@nuxt/ui/components/InputTags.vue";
+export { default as InputTime } from "@nuxt/ui/components/InputTime.vue";
+export { default as Kbd } from "@nuxt/ui/components/Kbd.vue";
+export { default as Link } from "@nuxt/ui/components/Link.vue";
+export { default as Main } from "@nuxt/ui/components/Main.vue";
+export { default as Marquee } from "@nuxt/ui/components/Marquee.vue";
+export { default as Modal } from "@nuxt/ui/components/Modal.vue";
+export { default as NavigationMenu } from "@nuxt/ui/components/NavigationMenu.vue";
+export { default as Page } from "@nuxt/ui/components/Page.vue";
+export { default as PageAnchors } from "@nuxt/ui/components/PageAnchors.vue";
+export { default as PageAside } from "@nuxt/ui/components/PageAside.vue";
+export { default as PageBody } from "@nuxt/ui/components/PageBody.vue";
+export { default as PageCard } from "@nuxt/ui/components/PageCard.vue";
+export { default as PageColumns } from "@nuxt/ui/components/PageColumns.vue";
+export { default as PageCTA } from "@nuxt/ui/components/PageCTA.vue";
+export { default as PageFeature } from "@nuxt/ui/components/PageFeature.vue";
+export { default as PageGrid } from "@nuxt/ui/components/PageGrid.vue";
+export { default as PageHeader } from "@nuxt/ui/components/PageHeader.vue";
+export { default as PageHero } from "@nuxt/ui/components/PageHero.vue";
+export { default as PageLinks } from "@nuxt/ui/components/PageLinks.vue";
+export { default as PageList } from "@nuxt/ui/components/PageList.vue";
+export { default as PageLogos } from "@nuxt/ui/components/PageLogos.vue";
+export { default as PageSection } from "@nuxt/ui/components/PageSection.vue";
+export { default as Pagination } from "@nuxt/ui/components/Pagination.vue";
+export { default as PinInput } from "@nuxt/ui/components/PinInput.vue";
+export { default as Popover } from "@nuxt/ui/components/Popover.vue";
+export { default as PricingPlan } from "@nuxt/ui/components/PricingPlan.vue";
+export { default as PricingPlans } from "@nuxt/ui/components/PricingPlans.vue";
+export { default as PricingTable } from "@nuxt/ui/components/PricingTable.vue";
+export { default as Progress } from "@nuxt/ui/components/Progress.vue";
+export { default as RadioGroup } from "@nuxt/ui/components/RadioGroup.vue";
+export { default as ScrollArea } from "@nuxt/ui/components/ScrollArea.vue";
+export { default as Select } from "@nuxt/ui/components/Select.vue";
+export { default as SelectMenu } from "@nuxt/ui/components/SelectMenu.vue";
+export { default as Separator } from "@nuxt/ui/components/Separator.vue";
+export { default as Sidebar } from "@nuxt/ui/components/Sidebar.vue";
+export { default as Skeleton } from "@nuxt/ui/components/Skeleton.vue";
+export { default as Slideover } from "@nuxt/ui/components/Slideover.vue";
+export { default as Slider } from "@nuxt/ui/components/Slider.vue";
+export { default as Stepper } from "@nuxt/ui/components/Stepper.vue";
+export { default as Switch } from "@nuxt/ui/components/Switch.vue";
+export { default as Table } from "@nuxt/ui/components/Table.vue";
+export { default as Tabs } from "@nuxt/ui/components/Tabs.vue";
+export { default as Textarea } from "@nuxt/ui/components/Textarea.vue";
+export { default as Timeline } from "@nuxt/ui/components/Timeline.vue";
+export { default as Toast } from "@nuxt/ui/components/Toast.vue";
+export { default as Toaster } from "@nuxt/ui/components/Toaster.vue";
+export { default as Tooltip } from "@nuxt/ui/components/Tooltip.vue";
+export { default as Tree } from "@nuxt/ui/components/Tree.vue";
+export { default as User } from "@nuxt/ui/components/User.vue";
+export { default as ColorModeAvatar } from "@nuxt/ui/components/color-mode/ColorModeAvatar.vue";
+export { default as ColorModeButton } from "@nuxt/ui/components/color-mode/ColorModeButton.vue";
+export { default as ColorModeImage } from "@nuxt/ui/components/color-mode/ColorModeImage.vue";
+export { default as ColorModeSelect } from "@nuxt/ui/components/color-mode/ColorModeSelect.vue";
+export { default as ColorModeSwitch } from "@nuxt/ui/components/color-mode/ColorModeSwitch.vue";
+export { default as LocaleSelect } from "@nuxt/ui/components/locale/LocaleSelect.vue";
+
+// Explicitly allowed composables
+export * from "@nuxt/ui/composables/defineShortcuts";

package/src/styles/index.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "@nuxt/ui";

package/src/utils/index.ts

@@ -1,3 +1 @@
-export * from "./parse-boolean"
-export * from "./deep-merge"
 export * from "./embed"

package/src/components/BlogPost.astro

@@ -1,181 +0,0 @@
----
-import { Image } from "astro:assets";
-import { scv } from "css-variants";
-import type { CollectionEntry } from "astro:content";
-import Separator from "@rimelight/ui/components/separator/Separator.astro";
-import Avatar from "@rimelight/ui/components/avatar/Avatar.astro";
-import AvatarImage from "@rimelight/ui/components/avatar/AvatarImage.astro";
-import avatarAsset from "../assets/team/Daniel-Marchi_0000_00.webp";
-import { fetchTranslations } from "@rimelight/ui/domain";
-
-const { translationLocale, cfContext } = Astro.locals;
-const runtime = { cf: Astro.request.cf, cfContext };
-const { blog: t } = await fetchTranslations(runtime, translationLocale, ["blog"]);
-
-// Support both Astro content collections and CMS documents
-export type CMSPostDocument = {
-  _id: string;
-  slug?: string;
-  title: string;
-  excerpt?: string;
-  description?: string;
-  image?: string;
-  publishedDate?: string | Date | null;
-  featured?: boolean;
-  _updatedAt?: string;
-  _createdAt?: string;
-};
-
-export interface BlogPostProps extends NonNullable<Parameters<typeof blogPostVariants>[0]> {
-  post: CollectionEntry<"blog"> | CMSPostDocument;
-  class?: string;
-  showImage?: boolean;
-  separator?: boolean;
-}
-
-type Props = BlogPostProps;
-
-const blogPostVariants = scv({
-  slots: [
-    "root",
-    "imageWrapper",
-    "image",
-    "content",
-    "title",
-    "description",
-    "footer",
-    "authorGroup",
-    "author",
-    "link",
-    "badge",
-    "featuredBadge"
-  ],
-  base: {
-    root: "group flex transition-all duration-300 w-full",
-    imageWrapper: "relative overflow-hidden ring-1 ring-border shadow-sm shrink-0 bg-muted isolate",
-    image: "absolute inset-0 h-full w-full !object-cover transition-transform duration-500 group-hover:scale-105 block",
-    content: "flex flex-col flex-1",
-    title: "font-heading font-bold tracking-tight text-pretty group-hover:text-primary transition-colors",
-    description: "text-muted-foreground line-clamp-2 text-base text-pretty",
-    footer: "mt-auto flex items-end justify-end w-full",
-    authorGroup: "flex flex-col gap-5xs text-xs font-medium text-muted-foreground",
-    author: "font-bold text-foreground",
-    link: "inline-flex items-center gap-5xs text-sm font-semibold hover:underline decoration-primary underline-offset-4",
-    badge: "px-2xs py-6xs rounded-full bg-muted text-muted-foreground text-[10px] font-bold uppercase tracking-wider",
-    featuredBadge: "absolute top-3 left-3 z-20 flex items-center gap-5xs px-3xs py-5xs rounded-full bg-primary text-primary-foreground text-[10px] font-bold uppercase tracking-wider shadow-lg ring-1 ring-white/20",
-  },
-  variants: {
-    variant: {
-      flat: {
-        root: "flex-col md:flex-row gap-3xl md:gap-4xl items-stretch py-4xl first:pt-0 last:pb-0 text-left",
-        imageWrapper: "w-full md:w-5/12 aspect-video self-stretch rounded-3xl shrink-0 shadow-none ring-0",
-        content: "gap-2xl justify-center items-start text-left",
-        title: "text-xl",
-        description: "text-base",
-      },
-      card: {
-        root: "flex-col bg-muted/20 p-2xl rounded-3xl border border-border/50 hover:bg-muted/40 hover:shadow-2xl hover:-translate-y-1 gap-2xl text-left items-stretch",
-        imageWrapper: "w-full aspect-video rounded-2xl shadow-lg",
-        title: "text-xl",
-        content: "gap-2xl text-left items-start",
-      },
-    },
-  },
-  defaultVariants: {
-    variant: "flat",
-  },
-});
-
-const { post, variant, class: className, showImage = true, separator = false } = Astro.props;
-
-// Detect if this is a CMS document or Astro content entry
-const isCMSDocument = "_id" in post && !("id" in post);
-
-// Extract fields based on source type
-const postTitle = isCMSDocument ? post.title : post.data.title;
-const postDescription = isCMSDocument ? (post.description || post.excerpt) : post.data.description;
-const postImage = isCMSDocument ? post.image : post.data.heroImage;
-const postFeatured = isCMSDocument ? (post.featured ?? false) : post.data.featured;
-
-// Handle date formatting
-const rawDate = isCMSDocument ? (post.publishedDate || post._createdAt) : post.data.publishedDate;
-const d = rawDate ? new Date(rawDate) : null;
-const formattedDate = d && !isNaN(d.getTime())
-  ? new Intl.DateTimeFormat(translationLocale, {
-      dateStyle: "medium",
-    }).format(d)
-  : "";
-
-// Get slug from CMS or Astro content
-const postSlug = isCMSDocument 
-  ? (post.slug || "")
-  : post.id.replace(/^(en|pt|de|es|ja)\//, "");
-
-const { root, imageWrapper, image, content, title, description, footer, authorGroup, author, link, badge, featuredBadge } = blogPostVariants({ variant });
----
-
-<div class="flex flex-col w-full">
-  <a href={`/${translationLocale}/blog/${postSlug}`} class:list={[root, className]}>
-    {showImage && (
-      <div class={imageWrapper}>
-        {postFeatured && (
-          <div class={featuredBadge}>
-            <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg>
-            {t.latest}
-          </div>
-        )}
-        {postImage && (
-          <Image
-            src={postImage as any}
-            alt={postTitle}
-            width={800}
-            height={450}
-            class={image}
-            loading="lazy"
-            decoding="async"
-          />
-        )}
-      </div>
-    )}
-
-    <div class={content}>
-      <h3 class={title}>
-        {postTitle}
-      </h3>
-
-      <div class="flex items-center gap-3xs mt-3xs">
-        <Avatar size="sm" variant="primary">
-          <AvatarImage image={avatarAsset} alt="Daniel Marchi" />
-        </Avatar>
-        <div class={authorGroup}>
-          <span class={author}>Daniel Marchi</span>
-          <div class="flex items-center gap-3xs">
-            <span>{formattedDate}</span>
-            <div class="flex flex-wrap gap-5xs ml-3xs">
-              <span class={badge}>Engineering</span>
-              <span class={badge}>Astro</span>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <p class={description}>
-        {postDescription}
-      </p>
-
-      <div class={footer}>
-        <span class={link}>
-          {t.read_article}
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-1"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
-        </span>
-      </div>
-    </div>
-  </a>
-
-  {separator && (
-    <div class="py-4xl last:hidden">
-      <Separator />
-    </div>
-  )}
-</div>
-