ariadne_view_components 0.0.94.6 → 0.0.95

data/app/components/ariadne/ui/shortcut/component.rb

@@ -24,10 +24,11 @@ module Ariadne
         style do
           base do
             [
-              "ariadne-inline-flex",
-              "ariadne-items-baseline",
-              "ariadne-select-none",
-              "*:ariadne-px-0",
+              "ariadne:inline-flex",
+              "ariadne:items-baseline",
+              "ariadne:gap-1.5",
+              "ariadne:select-none",
+              "ariadne:*:px-0",
             ]
           end
         end
@@ -35,42 +36,45 @@ module Ariadne
         style :key do
           base do
             [
-              "ariadne-font-mono",
-              "ariadne-px-2",
-              "ariadne-py-1.5",
-              "ariadne-text-xs",
-              "ariadne-font-semibold",
-              "ariadne-text-gray-800",
-              "ariadne-bg-neutral-50",
-              "ariadne-border",
-              "ariadne-border-gray-200",
-              "ariadne-rounded-lg",
-              "ariadne-dark:bg-neutral-600",
-              "ariadne-dark:text-gray-100",
-              "ariadne-dark:border-gray-500",
+              "ariadne:font-mono",
+              "ariadne:text-center",
+              "ariadne:px-1.5",
+              "ariadne:py-0.5",
+              "ariadne:text-xs",
+              "ariadne:font-semibold",
+              "ariadne:text-muted-foreground",
+              "ariadne:bg-muted",
+              "ariadne:border",
+              "ariadne:border-border",
+              "ariadne:rounded-md",
+              "ariadne:shadow-sm",
+              "ariadne:min-w-[1.2em]",
+              "ariadne:inline-flex",
+              "ariadne:items-center",
+              "ariadne:justify-center",
             ]
           end
 
           variants do
             size do
               xs do
-                ["ariadne-text-xs", "ariadne-px-1", "ariadne-rounded-sm"]
+                ["ariadne:text-xs", "ariadne:px-1", "ariadne:py-0.5", "ariadne:rounded-sm"]
               end
 
               sm do
-                ["ariadne-text-sm", "ariadne-px-1.5", "ariadne-rounded"]
+                ["ariadne:text-xs", "ariadne:px-1.5", "ariadne:py-0.5", "ariadne:rounded-md"]
               end
 
               md do
-                ["ariadne-text-base", "ariadne-px-1.5", "ariadne-rounded-md"]
+                ["ariadne:text-sm", "ariadne:px-1.5", "ariadne:py-0.5", "ariadne:rounded-md"]
               end
 
               lg do
-                ["ariadne-text-base", "ariadne-px-2", "ariadne-rounded-lg"]
+                ["ariadne:text-sm", "ariadne:px-2", "ariadne:py-1", "ariadne:rounded-md"]
               end
 
               xl do
-                ["ariadne-text-base", "ariadne-px-3", "ariadne-rounded-xl"]
+                ["ariadne:text-base", "ariadne:px-2.5", "ariadne:py-1", "ariadne:rounded-lg"]
               end
             end
           end

data/app/components/ariadne/ui/skeleton/component.rb

@@ -20,13 +20,13 @@ module Ariadne
         style do
           base do
             [
-              "ariadne-animate-pulse",
-              "ariadne-rounded-md",
-              "ariadne-bg-muted",
-              "ariadne-rounded-full",
-              "ariadne-mb-4",
-              "ariadne-bg-gray-200",
-              "dark:ariadne-bg-gray-700",
+              "ariadne:animate-pulse",
+              "ariadne:rounded-md",
+              "ariadne:bg-muted",
+              "ariadne:rounded-full",
+              "ariadne:mb-4",
+              "ariadne:bg-gray-200",
+              "ariadne:dark:bg-gray-700",
             ]
           end
 

data/app/components/ariadne/ui/stats_panel/component.rb

@@ -18,12 +18,12 @@ module Ariadne
         style do
           base do
             [
-              "ariadne-flex",
-              "ariadne-flex-wrap",
-              "ariadne-space-x-2",
-              "ariadne-divide-x",
-              "ariadne-divide-slate-100",
-              "dark:ariadne-divide-slate-800",
+              "ariadne:flex",
+              "ariadne:flex-wrap",
+              "ariadne:space-x-2",
+              "ariadne:divide-x",
+              "ariadne:divide-slate-100",
+              "ariadne:dark:divide-slate-800",
             ]
           end
 

data/app/components/ariadne/ui/stats_panel/item/component.html.erb

@@ -1,4 +1,4 @@
-<span class="ariadne-flex ariadne-flex-col-reverse">
-  <dt class="ariadne-text-zinc-600 dark:ariadne-text-zinc-400 ariadne-text-xs"><%= label %></dt>
+<span class="ariadne:flex ariadne:flex-col-reverse">
+  <dt class="ariadne:text-zinc-600 ariadne:dark:text-zinc-400 ariadne:text-xs"><%= label %></dt>
   <dd class="<%= html_attrs[:class] %>"><%= content %></dd>
 </span>

data/app/components/ariadne/ui/table/cell/component.rb

@@ -25,9 +25,9 @@ module Ariadne
           style :cell do
             base do
               [
-                "ariadne-p-4",
-                "ariadne-text-left",
-                "[&:has([role=checkbox])]:ariadne-pr-0",
+                "ariadne:p-4",
+                "ariadne:text-left",
+                "ariadne:[&:has([role=checkbox])]:pr-0",
               ]
             end
           end

data/app/components/ariadne/ui/table/component.rb

@@ -14,11 +14,11 @@ module Ariadne
         style :table do
           base do
             [
-              "ariadne-w-full",
-              "ariadne-caption-bottom",
-              "ariadne-text-sm",
-              "ariadne-border-collapse",
-              "ariadne-border-spacing-0",
+              "ariadne:w-full",
+              "ariadne:caption-bottom",
+              "ariadne:text-sm",
+              "ariadne:border-collapse",
+              "ariadne:border-spacing-0",
             ]
           end
         end
@@ -26,9 +26,9 @@ module Ariadne
         style :wrapper do
           base do
             [
-              "ariadne-relative",
-              "ariadne-w-full",
-              "ariadne-overflow-auto",
+              "ariadne:relative",
+              "ariadne:w-full",
+              "ariadne:overflow-auto",
             ]
           end
         end
@@ -36,7 +36,7 @@ module Ariadne
         style :body do
           base do
             [
-              "[&_tr:last-child]:ariadne-border-0",
+              "ariadne:[&_tr:last-child]:border-0",
             ]
           end
         end
@@ -44,9 +44,9 @@ module Ariadne
         style :caption do
           base do
             [
-              "ariadne-mt-4",
-              "ariadne-text-sm",
-              "ariadne-text-muted-foreground",
+              "ariadne:mt-4",
+              "ariadne:text-sm",
+              "ariadne:text-muted-foreground",
             ]
           end
         end

data/app/components/ariadne/ui/table/footer/component.rb

@@ -16,8 +16,8 @@ module Ariadne
           style :footer do
             base do
               [
-                "ariadne-border-t",
-                "ariadne-bg-muted/50",
+                "ariadne:border-t",
+                "ariadne:bg-muted/50",
                 "[&>tr]:ariadne-last:border-b-0",
               ]
             end
@@ -26,12 +26,12 @@ module Ariadne
           style :footer_cell do
             base do
               [
-                "ariadne-h-12",
-                "ariadne-px-4",
-                "ariadne-text-left",
-                "ariadne-align-middle",
-                "ariadne-font-medium",
-                "[&:has([role=checkbox])]:ariadne-pr-0",
+                "ariadne:h-12",
+                "ariadne:px-4",
+                "ariadne:text-left",
+                "ariadne:align-middle",
+                "ariadne:font-medium",
+                "ariadne:[&:has([role=checkbox])]:pr-0",
               ]
             end
           end

data/app/components/ariadne/ui/table/header/component.rb

@@ -21,7 +21,7 @@ module Ariadne
           style :header do
             base do
               [
-                "[&_tr]:ariadne-border-b",
+                "ariadne:[&_tr]:border-b",
               ]
             end
           end
@@ -29,14 +29,14 @@ module Ariadne
           style :header_cell do
             base do
               [
-                "ariadne-h-12",
-                "ariadne-px-4",
-                "ariadne-text-left",
-                "ariadne-align-middle",
-                "ariadne-font-medium",
-                "ariadne-text-muted-foreground",
-                "[&:has([role=checkbox])]:ariadne-pr-0",
-                "ariadne-whitespace-nowrap",
+                "ariadne:h-12",
+                "ariadne:px-4",
+                "ariadne:text-left",
+                "ariadne:align-middle",
+                "ariadne:font-medium",
+                "ariadne:text-muted-foreground",
+                "ariadne:[&:has([role=checkbox])]:pr-0",
+                "ariadne:whitespace-nowrap",
               ]
             end
           end

data/app/components/ariadne/ui/table/row/component.rb

@@ -23,10 +23,10 @@ module Ariadne
           style :row do
             base do
               [
-                "ariadne-border-b",
-                "ariadne-transition-colors",
-                "hover:ariadne-bg-muted/50",
-                "data-[state=selected]:ariadne-bg-muted",
+                "ariadne:border-b",
+                "ariadne:transition-colors",
+                "ariadne:hover:bg-muted/50",
+                "ariadne:data-[state=selected]:bg-muted",
               ]
             end
           end

data/app/components/ariadne/ui/typography/component.rb

@@ -43,8 +43,8 @@ module Ariadne
         style do
           base do
             [
-              "ariadne-text-content",
-              "dark:ariadne-text-content-dark",
+              "ariadne:text-content",
+              "ariadne:dark:text-content-dark",
             ]
           end
 
@@ -52,19 +52,19 @@ module Ariadne
             size do
               sm do
                 [
-                  "ariadne-text-sm",
+                  "ariadne:text-sm",
                 ]
               end
 
               base do
                 [
-                  "ariadne-text-base",
+                  "ariadne:text-base",
                 ]
               end
 
               lg do
                 [
-                  "ariadne-text-lg",
+                  "ariadne:text-lg",
                 ]
               end
             end
@@ -72,78 +72,78 @@ module Ariadne
             type do
               title do
                 [
-                  "ariadne-scroll-m-20",
-                  "ariadne-text-4xl",
-                  "ariadne-font-extrabold",
-                  "ariadne-tracking-tight",
-                  "lg:ariadne-text-5xl",
+                  "ariadne:scroll-m-20",
+                  "ariadne:text-4xl",
+                  "ariadne:font-extrabold",
+                  "ariadne:tracking-tight",
+                  "ariadne:lg:text-5xl",
                 ]
               end
 
               heading do
                 [
-                  "ariadne-scroll-m-20",
-                  "ariadne-pb-2",
-                  "ariadne-text-3xl",
-                  "ariadne-font-semibold",
-                  "ariadne-tracking-tight",
-                  "first:ariadne-mt-0",
+                  "ariadne:scroll-m-20",
+                  "ariadne:pb-2",
+                  "ariadne:text-3xl",
+                  "ariadne:font-semibold",
+                  "ariadne:tracking-tight",
+                  "ariadne:first:mt-0",
                 ]
               end
 
               subheading do
                 [
-                  "ariadne-scroll-m-20",
-                  "ariadne-text-2xl",
-                  "ariadne-font-semibold",
-                  "ariadne-tracking-tight",
+                  "ariadne:scroll-m-20",
+                  "ariadne:text-2xl",
+                  "ariadne:font-semibold",
+                  "ariadne:tracking-tight",
                 ]
               end
 
               ann do
                 [
-                  "ariadne-scroll-m-20",
-                  "ariadne-text-xl",
-                  "ariadne-font-semibold",
-                  "ariadne-tracking-tight",
+                  "ariadne:scroll-m-20",
+                  "ariadne:text-xl",
+                  "ariadne:font-semibold",
+                  "ariadne:tracking-tight",
                 ]
               end
 
               lede do
                 [
-                  "ariadne-text-xl",
-                  "ariadne-text-slate-500",
+                  "ariadne:text-xl",
+                  "ariadne:text-slate-500",
                 ]
               end
 
               label do
                 [
-                  "ariadne-justify-between",
-                  "ariadne-whitespace-nowrap",
-                  "ariadne-text-sm",
-                  "ariadne-font-medium",
-                  "ariadne-uppercase",
-                  "ariadne-text-zinc-600",
-                  "dark:ariadne-text-zinc-400",
+                  "ariadne:justify-between",
+                  "ariadne:whitespace-nowrap",
+                  "ariadne:text-sm",
+                  "ariadne:font-medium",
+                  "ariadne:uppercase",
+                  "ariadne:text-zinc-600",
+                  "ariadne:dark:text-zinc-400",
                 ]
               end
 
               code do
                 [
-                  "ariadne-relative",
-                  "ariadne-rounded",
-                  "ariadne-bg-neutral-100",
-                  "ariadne-px-[0.3rem]",
-                  "ariadne-py-[0.2rem]",
-                  "ariadne-font-mono",
-                  "ariadne-text-sm",
-                  "ariadne-font-semibold",
+                  "ariadne:relative",
+                  "ariadne:rounded",
+                  "ariadne:bg-neutral-100",
+                  "ariadne:px-[0.3rem]",
+                  "ariadne:py-[0.2rem]",
+                  "ariadne:font-mono",
+                  "ariadne:text-sm",
+                  "ariadne:font-semibold",
                 ]
               end
 
               muted do
                 [
-                  "ariadne-text-muted-foreground",
+                  "ariadne:text-muted-foreground",
                 ]
               end
 

data/app/frontend/controllers/tooltip_controller.ts

@@ -1,8 +1,8 @@
 import {controllerFactory} from '@utils/createController'
-import {computePosition, arrow, offset, flip, Placement} from '@floating-ui/dom'
+import {computePosition, arrow, offset, flip, shift, Placement} from '@floating-ui/dom'
 
-const TRIANGLE_HEIGHT = 6
-const DEFAULT_OFFSET = 4;
+const TRIANGLE_HEIGHT = 8
+const DEFAULT_OFFSET = 8;
 
 export default class TooltipController extends controllerFactory<HTMLElement>()({
   targets: {
@@ -19,8 +19,9 @@ export default class TooltipController extends controllerFactory<HTMLElement>()(
     computePosition(this.activatorTarget, this.tooltipTarget, {
       placement,
       middleware: [
-        flip({ padding: 12 }), 
-        offset(TRIANGLE_HEIGHT + DEFAULT_OFFSET), 
+        offset(TRIANGLE_HEIGHT + DEFAULT_OFFSET),
+        flip({ padding: 8 }),
+        shift({ padding: 8 }),
         arrow({ element: this.arrowTarget })
       ],
     }).then(({x, y, placement, middlewareData}) => {
@@ -29,13 +30,18 @@ export default class TooltipController extends controllerFactory<HTMLElement>()(
         top: `${y}px`,
       })
 
+      // Set data-side attribute for styling & animations
+      const side = placement.split('-')[0]
+      this.tooltipTarget.setAttribute('data-side', side)
+      this.arrowTarget.setAttribute('data-side', side)
+
       const {x: arrowX, y: arrowY} = middlewareData.arrow || {}
       const staticSide = {
         top: 'bottom',
         right: 'left',
         bottom: 'top',
         left: 'right',
-      }[placement.split('-')[0]] as string
+      }[side] as string
 
       const arrowStyles: Partial<CSSStyleDeclaration> = {
         left: arrowX != null ? `${arrowX}px` : '',
@@ -43,20 +49,31 @@ export default class TooltipController extends controllerFactory<HTMLElement>()(
         right: '',
         bottom: '',
       }
-      arrowStyles[staticSide as 'top' | 'right' | 'bottom' | 'left'] = '-4px'
+      
+      // The arrow is now a triangle created with borders, so we need to adjust its position
+      // to ensure it's properly aligned with the tooltip edge
+      if (staticSide === 'top') {
+        arrowStyles.bottom = '-8px'; // Move outside the tooltip
+      } else if (staticSide === 'bottom') {
+        arrowStyles.top = '-8px'; // Move outside the tooltip
+      } else if (staticSide === 'left') {
+        arrowStyles.right = '-8px'; // Move outside the tooltip
+      } else if (staticSide === 'right') {
+        arrowStyles.left = '-8px'; // Move outside the tooltip
+      }
 
       Object.assign(this.arrowTarget.style, arrowStyles)
     })
   }
 
   showTooltip(_event: Event) {
-    this.wrapperTarget.classList.add('ariadne-block')
-    this.wrapperTarget.classList.remove('ariadne-hidden')
+    this.wrapperTarget.classList.add('ariadne:block')
+    this.wrapperTarget.classList.remove('ariadne:hidden')
     this.update()
   }
 
   hideTooltip(_event: Event) {
-    this.wrapperTarget.classList.add('ariadne-hidden')
-    this.wrapperTarget.classList.remove('ariadne-block')
+    this.wrapperTarget.classList.add('ariadne:hidden')
+    this.wrapperTarget.classList.remove('ariadne:block')
   }
 }

data/app/frontend/stylesheets/ariadne_view_components.css

@@ -1,9 +1,14 @@
-@import 'scrollbar.css';
-@import 'theme.css';
+@import './scrollbar.css' layer(base);
 
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss' prefix(ariadne);
+
+@import '@evilmartians/harmony/tailwind.css';
+
+@import './theme.css' layer(base);
+
+@plugin "@tailwindcss/typography";
+
+@custom-variant dark (&:where([data-ariadne-color-mode="dark"], [data-ariadne-color-mode="dark"] *));
 
 /* Fix summary element usage in Safari only */
 summary::-webkit-details-marker {

data/app/frontend/stylesheets/scrollbar.css

@@ -2,27 +2,27 @@
   scrollbar-color: theme('colors.gray.500/20') transparent;
 
   *::-webkit-scrollbar {
-    @apply ariadne-h-4 ariadne-w-2;
+    @apply ariadne:h-4 ariadne:w-2;
   }
 
   *::-webkit-scrollbar:horizontal {
-    @apply ariadne-h-2 ariadne-w-4;
+    @apply ariadne:h-2 ariadne:w-4;
   }
 
   *::-webkit-scrollbar-track {
-    @apply ariadne-bg-transparent;
+    @apply ariadne:bg-transparent;
   }
 
   *::-webkit-scrollbar-thumb {
-    @apply ariadne-bg-gray-500/20 hover:ariadne-bg-gray-500/40;
-    @apply ariadne-transition-opacity;
+    @apply ariadne:bg-gray-500/20 ariadne:hover:bg-gray-500/40;
+    @apply ariadne:transition-opacity;
   }
 }
 
 .scrollbar-trigger *::-webkit-scrollbar-thumb {
-  @apply md:ariadne-invisible;
+  @apply ariadne:md:invisible;
 }
 
 .scrollbar-trigger:hover *::-webkit-scrollbar-thumb {
-  @apply md:ariadne-visible;
+  @apply ariadne:md:visible;
 }