@quikturn/logos-vue 1.0.0

package/README.md

@@ -0,0 +1,361 @@
+# @quikturn/logos-vue
+
+> Vue 3 components for the [Quikturn Logos API](https://getquikturn.io) -- drop-in logo display, infinite carousel, and responsive grid.
+
+**[Get your API key](https://getquikturn.io)** -- free tier available, no credit card required.
+
+## Features
+
+- **`<QuikturnLogo>`** -- single logo image with lazy loading, optional link wrapper
+- **`<QuikturnLogoCarousel>`** -- infinite scrolling logo ticker (horizontal or vertical)
+- **`<QuikturnLogoGrid>`** -- responsive CSS grid of logos
+- **`QuikturnPlugin`** -- Vue plugin for token and base URL propagation via `provide`/`inject`
+- **`useLogoUrl()`** -- composable that returns a computed Quikturn logo URL
+- **`useQuikturnContext()`** -- composable to access the injected token and base URL
+- **Zero CSS dependencies** -- inline styles only, no Tailwind or CSS-in-JS required
+- **Tree-shakeable** -- ESM and CJS dual builds; import only what you use
+
+## Installation
+
+```bash
+# pnpm (recommended)
+pnpm add @quikturn/logos-vue @quikturn/logos vue
+
+# npm
+npm install @quikturn/logos-vue @quikturn/logos vue
+```
+
+**Peer dependencies:** `vue >= 3.3`, `@quikturn/logos >= 0.1.0`
+
+## Quick Start
+
+### 1. Install the plugin in your app entry
+
+```ts
+// main.ts
+import { createApp } from "vue";
+import { QuikturnPlugin } from "@quikturn/logos-vue";
+import App from "./App.vue";
+
+const app = createApp(App);
+app.use(QuikturnPlugin, { token: "qt_your_publishable_key" });
+app.mount("#app");
+```
+
+### 2. Use components anywhere in your app
+
+```vue
+<script setup lang="ts">
+import { QuikturnLogo, QuikturnLogoCarousel } from "@quikturn/logos-vue";
+</script>
+
+<template>
+  <!-- Single logo -->
+  <QuikturnLogo domain="github.com" :size="64" />
+
+  <!-- Infinite scrolling carousel -->
+  <QuikturnLogoCarousel
+    :domains="['github.com', 'stripe.com', 'vercel.com', 'figma.com']"
+    :speed="120"
+    :logo-height="28"
+    :gap="48"
+    fade-out
+  />
+</template>
+```
+
+## API Reference
+
+### `QuikturnPlugin`
+
+Vue plugin that provides `token` and `baseUrl` to all nested components via `provide`/`inject`. Individual components can override these values with their own props.
+
+```ts
+app.use(QuikturnPlugin, {
+  token: "qt_abc123",
+  baseUrl: "https://custom.api", // optional
+});
+```
+
+| Option | Type | Required | Description |
+|--------|------|----------|-------------|
+| `token` | `string` | yes | Publishable API key (`qt_`/`pk_` prefix) |
+| `baseUrl` | `string` | no | Override the Quikturn API base URL |
+
+---
+
+### `<QuikturnLogo>`
+
+Renders a single logo `<img>`. Optionally wraps in an `<a>` tag when `href` is provided.
+
+```vue
+<QuikturnLogo
+  domain="stripe.com"
+  :size="128"
+  format="webp"
+  greyscale
+  theme="dark"
+  alt="Stripe"
+  href="https://stripe.com"
+  loading="lazy"
+  class="my-logo"
+  :style="{ borderRadius: '8px' }"
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `domain` | `string` | **required** | Domain to fetch logo for |
+| `token` | `string` | from plugin | Publishable API key |
+| `baseUrl` | `string` | from plugin | API base URL override |
+| `size` | `number` | `128` | Logo width in pixels |
+| `format` | `string` | `"image/png"` | `"png"`, `"jpeg"`, `"webp"`, `"avif"`, or MIME type |
+| `greyscale` | `boolean` | `false` | Greyscale transformation |
+| `theme` | `"light" \| "dark"` | -- | Background-optimized rendering |
+| `alt` | `string` | `"<domain> logo"` | Image alt text |
+| `href` | `string` | -- | Wraps the image in a link |
+| `loading` | `"lazy" \| "eager"` | `"lazy"` | Native image loading strategy |
+| `class` | `string` | -- | CSS class on wrapper element |
+| `style` | `CSSProperties` | -- | Inline styles on wrapper element |
+
+---
+
+### `<QuikturnLogoCarousel>`
+
+Infinite scrolling logo ticker powered by `requestAnimationFrame`. Supports horizontal (left/right) and vertical (up/down) scrolling, hover-based speed changes, fade overlays, and per-logo customization.
+
+```vue
+<QuikturnLogoCarousel
+  :domains="['github.com', 'stripe.com', 'vercel.com', 'figma.com']"
+  :speed="120"
+  direction="left"
+  :logo-height="28"
+  :gap="48"
+  fade-out
+  fade-out-color="#f5f5f5"
+  pause-on-hover
+  scale-on-hover
+  width="100%"
+/>
+```
+
+#### Using `logos` for per-logo configuration
+
+```vue
+<QuikturnLogoCarousel
+  :logos="[
+    { domain: 'github.com', href: 'https://github.com', alt: 'GitHub' },
+    { domain: 'stripe.com', size: 256, greyscale: true },
+    { domain: 'vercel.com', theme: 'dark' },
+  ]"
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `domains` | `string[]` | -- | Simple list of domains (use this or `logos`) |
+| `logos` | `LogoConfig[]` | -- | Per-logo configuration objects (use this or `domains`) |
+| `token` | `string` | from plugin | Publishable API key |
+| `baseUrl` | `string` | from plugin | API base URL override |
+| `speed` | `number` | `120` | Scroll speed in pixels per second |
+| `direction` | `"left" \| "right" \| "up" \| "down"` | `"left"` | Scroll direction |
+| `pauseOnHover` | `boolean` | `false` | Pause scrolling on mouse hover |
+| `hoverSpeed` | `number` | -- | Custom speed during hover (`0` = pause, overrides `pauseOnHover`) |
+| `logoHeight` | `number` | `28` | Height of each logo image in pixels |
+| `gap` | `number` | `32` | Gap between logos in pixels |
+| `width` | `number \| string` | `"100%"` | Container width (`600`, `"80%"`, etc.) |
+| `fadeOut` | `boolean` | `false` | Show gradient fade overlays at edges |
+| `fadeOutColor` | `string` | `"#ffffff"` | Fade overlay color (match your background) |
+| `scaleOnHover` | `boolean` | `false` | Scale logos on individual hover |
+| `logoSize` | `number` | `128` | Default image fetch width for all logos |
+| `logoFormat` | `string` | -- | Default image format for all logos |
+| `logoGreyscale` | `boolean` | -- | Default greyscale setting for all logos |
+| `logoTheme` | `"light" \| "dark"` | -- | Default theme for all logos |
+| `renderItem` | `(logo: ResolvedLogo, index: number) => VNode` | -- | Custom render function per logo |
+| `class` | `string` | -- | CSS class on root container |
+| `style` | `CSSProperties` | -- | Inline styles on root container |
+| `ariaLabel` | `string` | `"Company logos"` | Accessible label for the region |
+
+#### `LogoConfig`
+
+Used in the `logos` array prop for per-logo customization:
+
+```ts
+interface LogoConfig {
+  domain: string;        // Required
+  href?: string;         // Wrap in link
+  alt?: string;          // Alt text override
+  size?: number;         // Per-logo image width
+  format?: string;       // Per-logo format
+  greyscale?: boolean;   // Per-logo greyscale
+  theme?: "light" | "dark";
+}
+```
+
+---
+
+### `<QuikturnLogoGrid>`
+
+Responsive CSS grid of logos. Each logo is centered in its grid cell.
+
+```vue
+<QuikturnLogoGrid
+  :domains="['github.com', 'stripe.com', 'vercel.com', 'figma.com']"
+  :columns="4"
+  :gap="24"
+  aria-label="Our partners"
+/>
+```
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `domains` | `string[]` | -- | Simple list of domains (use this or `logos`) |
+| `logos` | `LogoConfig[]` | -- | Per-logo configuration objects |
+| `token` | `string` | from plugin | Publishable API key |
+| `baseUrl` | `string` | from plugin | API base URL override |
+| `columns` | `number` | `4` | Number of grid columns |
+| `gap` | `number` | `24` | Grid gap in pixels |
+| `logoSize` | `number` | `128` | Default image fetch width |
+| `logoFormat` | `string` | -- | Default image format |
+| `logoGreyscale` | `boolean` | -- | Default greyscale |
+| `logoTheme` | `"light" \| "dark"` | -- | Default theme |
+| `renderItem` | `(logo: ResolvedLogo, index: number) => VNode` | -- | Custom render function per logo |
+| `class` | `string` | -- | CSS class on grid container |
+| `style` | `CSSProperties` | -- | Inline styles on grid container |
+| `ariaLabel` | `string` | `"Company logos"` | Accessible label for the region |
+
+---
+
+### `useLogoUrl(domain, options?)`
+
+Composable that returns a `ComputedRef<string>` for a Quikturn logo URL. Pulls `token` and `baseUrl` from the plugin unless overridden. Both arguments accept refs or getters for reactivity.
+
+```vue
+<script setup lang="ts">
+import { useLogoUrl } from "@quikturn/logos-vue";
+
+const url = useLogoUrl("github.com", { size: 256, format: "webp" });
+</script>
+
+<template>
+  <img :src="url" alt="GitHub" />
+</template>
+```
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `domain` | `string \| Ref<string> \| () => string` | Domain to build URL for |
+| `options.token` | `string` | Override plugin token |
+| `options.baseUrl` | `string` | Override plugin base URL |
+| `options.size` | `number` | Image width in pixels |
+| `options.format` | `string` | Output format |
+| `options.greyscale` | `boolean` | Greyscale transformation |
+| `options.theme` | `"light" \| "dark"` | Theme optimization |
+
+**Returns:** `ComputedRef<string>` -- fully-qualified, reactive logo URL
+
+---
+
+### `useQuikturnContext()`
+
+Composable that returns the token and base URL injected by `QuikturnPlugin`. Returns `undefined` if the plugin has not been installed.
+
+```vue
+<script setup lang="ts">
+import { useQuikturnContext } from "@quikturn/logos-vue";
+
+const ctx = useQuikturnContext();
+// ctx?.token, ctx?.baseUrl
+</script>
+```
+
+---
+
+## Examples
+
+### Logo Wall (Marketing Page)
+
+```vue
+<script setup lang="ts">
+import { QuikturnLogoCarousel } from "@quikturn/logos-vue";
+
+const partners = [
+  "github.com", "stripe.com", "vercel.com", "figma.com",
+  "linear.app", "notion.so", "slack.com", "discord.com",
+];
+</script>
+
+<template>
+  <h2>Trusted by industry leaders</h2>
+  <QuikturnLogoCarousel
+    :domains="partners"
+    :speed="80"
+    :logo-height="32"
+    :gap="64"
+    fade-out
+    pause-on-hover
+  />
+</template>
+```
+
+### Partner Grid with Links
+
+```vue
+<script setup lang="ts">
+import { QuikturnLogoGrid } from "@quikturn/logos-vue";
+
+const partners = [
+  { domain: "github.com", href: "https://github.com", alt: "GitHub" },
+  { domain: "stripe.com", href: "https://stripe.com", alt: "Stripe" },
+  { domain: "vercel.com", href: "https://vercel.com", alt: "Vercel" },
+  { domain: "figma.com", href: "https://figma.com", alt: "Figma" },
+];
+</script>
+
+<template>
+  <QuikturnLogoGrid :logos="partners" :columns="2" :gap="32" />
+</template>
+```
+
+### Vertical Carousel
+
+```vue
+<template>
+  <div style="height: 240px">
+    <QuikturnLogoCarousel
+      :domains="['github.com', 'stripe.com', 'vercel.com']"
+      direction="up"
+      :speed="60"
+      :logo-height="24"
+    />
+  </div>
+</template>
+```
+
+### Using the Composable Directly
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue";
+import { useLogoUrl } from "@quikturn/logos-vue";
+
+const domain = ref("github.com");
+const url = useLogoUrl(domain, { size: 256, format: "webp" });
+</script>
+
+<template>
+  <input v-model="domain" placeholder="Enter a domain" />
+  <img :src="url" :alt="`${domain} logo`" />
+</template>
+```
+
+## Resources
+
+- **[Quikturn website](https://getquikturn.io)** -- sign up, manage keys, explore the API
+- **[Dashboard](https://getquikturn.io/dashboard)** -- usage analytics, key management, plan upgrades
+- **[Pricing](https://getquikturn.io/pricing)** -- free tier, pro, and enterprise plans
+- **[Core SDK docs](https://www.npmjs.com/package/@quikturn/logos)** -- `@quikturn/logos` URL builder, browser client, server client
+
+## License
+
+MIT -- built by [Quikturn](https://getquikturn.io)

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),O=require("@quikturn/logos"),D=Symbol("quikturn"),j={install(n,t){n.provide(D,{token:t.token,baseUrl:t.baseUrl})}};function U(){return e.inject(D)}function Y(n,t){const o=U();return e.computed(()=>{const l=t?e.toValue(t):void 0,m=(l==null?void 0:l.token)??(o==null?void 0:o.token),f=(l==null?void 0:l.baseUrl)??(o==null?void 0:o.baseUrl);return O.logoUrl(e.toValue(n),{token:m,baseUrl:f,size:l==null?void 0:l.size,format:l==null?void 0:l.format,greyscale:l==null?void 0:l.greyscale,theme:l==null?void 0:l.theme})})}const P=new Set;function F(n){if(typeof window>"u"||!n||n.startsWith("sk_")||P.has(n))return;P.add(n);const t=new Image;t.src=`${O.BASE_URL}/_beacon?token=${n}&page=${encodeURIComponent(location.href)}`}function N(n){try{const t=new URL(n,"https://placeholder.invalid");return t.protocol==="https:"||t.protocol==="http:"}catch{return!1}}const K=["href"],J=["src","alt","loading"],X=["src","alt","loading"],Z=["src","alt","loading"],ee=e.defineComponent({__name:"QuikturnLogo",props:{domain:{},token:{},baseUrl:{},size:{},format:{},greyscale:{type:Boolean},theme:{},alt:{},href:{},class:{},style:{},loading:{default:"lazy"}},emits:["error","load"],setup(n,{emit:t}){const o=n,l=t,m=U(),f=e.computed(()=>o.token??(m==null?void 0:m.token)??""),v=e.computed(()=>o.baseUrl??(m==null?void 0:m.baseUrl)),i=e.computed(()=>O.logoUrl(o.domain,{token:f.value||void 0,size:o.size,format:o.format,greyscale:o.greyscale,theme:o.theme,baseUrl:v.value})),a=e.computed(()=>o.alt??`${o.domain} logo`);return e.onMounted(()=>{f.value&&F(f.value)}),(u,c)=>n.href&&e.unref(N)(n.href)?(e.openBlock(),e.createElementBlock("a",{key:0,href:n.href,target:"_blank",rel:"noopener noreferrer",class:e.normalizeClass(o.class),style:e.normalizeStyle(o.style)},[e.createElementVNode("img",{src:i.value,alt:a.value,loading:n.loading,onError:c[0]||(c[0]=d=>l("error",d)),onLoad:c[1]||(c[1]=d=>l("load",d))},null,40,J)],14,K)):o.class||o.style?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(o.class),style:e.normalizeStyle(o.style)},[e.createElementVNode("img",{src:i.value,alt:a.value,loading:n.loading,onError:c[2]||(c[2]=d=>l("error",d)),onLoad:c[3]||(c[3]=d=>l("load",d))},null,40,X)],6)):(e.openBlock(),e.createElementBlock("img",{key:2,src:i.value,alt:a.value,loading:n.loading,onError:c[4]||(c[4]=d=>l("error",d)),onLoad:c[5]||(c[5]=d=>l("load",d))},null,40,Z))}}),te=["aria-label"],oe={key:1,style:{display:"flex",alignItems:"center",justifyContent:"center"}},ne=["href","aria-label"],le=["src","alt"],ae=["src","alt"],re=e.defineComponent({__name:"QuikturnLogoGrid",props:{domains:{},logos:{},token:{},baseUrl:{},columns:{default:4},gap:{default:24},logoSize:{},logoFormat:{},logoGreyscale:{type:Boolean},logoTheme:{},renderItem:{},class:{},style:{},ariaLabel:{default:"Company logos"}},setup(n){const t=n,o=U(),l=e.computed(()=>t.token??(o==null?void 0:o.token)??""),m=e.computed(()=>t.baseUrl??(o==null?void 0:o.baseUrl)),f=e.computed(()=>(t.logos??(t.domains??[]).map(a=>({domain:a}))).map(a=>({domain:a.domain,alt:a.alt??`${a.domain} logo`,href:a.href,url:O.logoUrl(a.domain,{token:l.value||void 0,size:a.size??t.logoSize,format:a.format??t.logoFormat,greyscale:a.greyscale??t.logoGreyscale,theme:a.theme??t.logoTheme,baseUrl:m.value})}))),v=e.computed(()=>({display:"grid",gridTemplateColumns:`repeat(${t.columns}, 1fr)`,gap:`${t.gap}px`,alignItems:"center",justifyItems:"center",...t.style??{}}));return e.onMounted(()=>{l.value&&F(l.value)}),(i,a)=>(e.openBlock(),e.createElementBlock("div",{role:"region","aria-label":n.ariaLabel,class:e.normalizeClass(t.class),style:e.normalizeStyle(v.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f.value,(u,c)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:u.domain},[n.renderItem?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.renderItem(u,c)),{key:0})):(e.openBlock(),e.createElementBlock("div",oe,[u.href&&e.unref(N)(u.href)?(e.openBlock(),e.createElementBlock("a",{key:0,href:u.href,target:"_blank",rel:"noopener noreferrer","aria-label":u.alt},[e.createElementVNode("img",{src:u.url,alt:u.alt,loading:"lazy",style:{maxWidth:"100%",height:"auto",display:"block"}},null,8,le)],8,ne)):(e.openBlock(),e.createElementBlock("img",{key:1,src:u.url,alt:u.alt,loading:"lazy",style:{maxWidth:"100%",height:"auto",display:"block"}},null,8,ae))]))],64))),128))],14,te))}}),S={SMOOTH_TAU:.25,MIN_COPIES:2,COPY_HEADROOM:2};function ie(n,t,o){e.watch(o,(l,m,f)=>{if(typeof window>"u")return;if(!window.ResizeObserver){const i=()=>n();window.addEventListener("resize",i),n(),f(()=>window.removeEventListener("resize",i));return}const v=t.map(i=>{const a=i.value;if(!a)return null;const u=new ResizeObserver(n);return u.observe(a),u});n(),f(()=>{v.forEach(i=>i==null?void 0:i.disconnect())})},{immediate:!0})}function se(n,t,o){e.watch(o,(l,m,f)=>{var u;const v=((u=n.value)==null?void 0:u.querySelectorAll("img"))??[];if(v.length===0){t();return}let i=v.length;const a=()=>{i-=1,i===0&&t()};v.forEach(c=>{const d=c;d.complete?a():(d.addEventListener("load",a,{once:!0}),d.addEventListener("error",a,{once:!0}))}),f(()=>{v.forEach(c=>{c.removeEventListener("load",a),c.removeEventListener("error",a)})})},{immediate:!0})}function ue(n,t,o,l,m,f,v){const i=e.ref(null),a=e.ref(null),u=e.ref(0),c=e.ref(0);e.watch(()=>[t(),o(),l(),m(),f(),v()],(d,y,b)=>{var C;const k=n.value;if(!k)return;const x=typeof window<"u"&&((C=window.matchMedia)==null?void 0:C.call(window,"(prefers-reduced-motion: reduce)").matches),z=v(),h=z?l():o();if(h>0&&(u.value=(u.value%h+h)%h,k.style.transform=z?`translate3d(0, ${-u.value}px, 0)`:`translate3d(${-u.value}px, 0, 0)`),x){k.style.transform="translate3d(0, 0, 0)",b(()=>{a.value=null});return}const _=B=>{a.value===null&&(a.value=B);const L=Math.max(0,B-a.value)/1e3;a.value=B;const I=f(),E=m()&&I!==void 0?I:t(),H=1-Math.exp(-L/S.SMOOTH_TAU);if(c.value+=(E-c.value)*H,h>0){let w=u.value+c.value*L;w=(w%h+h)%h,u.value=w,k.style.transform=z?`translate3d(0, ${-u.value}px, 0)`:`translate3d(${-u.value}px, 0, 0)`}i.value=requestAnimationFrame(_)};i.value=requestAnimationFrame(_),b(()=>{i.value!==null&&(cancelAnimationFrame(i.value),i.value=null),a.value=null})},{immediate:!0}),e.onUnmounted(()=>{i.value!==null&&(cancelAnimationFrame(i.value),i.value=null)})}const ce=["aria-label"],de=["aria-hidden"],fe=["href","aria-label"],me=["src","alt"],ve=["src","alt"],ge=e.defineComponent({__name:"QuikturnLogoCarousel",props:{domains:{default:void 0},logos:{default:void 0},token:{default:void 0},baseUrl:{default:void 0},speed:{default:120},direction:{default:"left"},pauseOnHover:{type:Boolean,default:void 0},hoverSpeed:{default:void 0},logoHeight:{default:28},gap:{default:32},width:{default:"100%"},fadeOut:{type:Boolean,default:!1},fadeOutColor:{default:void 0},scaleOnHover:{type:Boolean,default:!1},logoSize:{default:void 0},logoFormat:{default:void 0},logoGreyscale:{type:Boolean,default:void 0},logoTheme:{default:void 0},renderItem:{type:Function,default:void 0},class:{},style:{},ariaLabel:{default:"Company logos"}},setup(n){const t=n,o=U(),l=e.computed(()=>t.token??(o==null?void 0:o.token)??""),m=e.computed(()=>t.baseUrl??(o==null?void 0:o.baseUrl)),f=e.ref(null),v=e.ref(null),i=e.ref(null),a=e.ref(0),u=e.ref(0),c=e.ref(S.MIN_COPIES),d=e.ref(!1),y=e.computed(()=>t.direction==="up"||t.direction==="down"),b=e.computed(()=>(t.logos??(t.domains??[]).map(s=>({domain:s}))).map(s=>({domain:s.domain,alt:s.alt??`${s.domain} logo`,href:s.href,url:O.logoUrl(s.domain,{token:l.value||void 0,size:s.size??t.logoSize,format:s.format??t.logoFormat,greyscale:s.greyscale??t.logoGreyscale,theme:s.theme??t.logoTheme,baseUrl:m.value})}))),k=e.computed(()=>{if(t.hoverSpeed!==void 0)return t.hoverSpeed;if(t.pauseOnHover===!0)return 0}),x=e.computed(()=>{const r=Math.abs(t.speed),s=y.value?t.direction==="up"?1:-1:t.direction==="left"?1:-1,g=t.speed<0?-1:1;return r*s*g}),z=e.computed(()=>{const r=t.width;return typeof r=="number"?`${r}px`:r??void 0}),h=e.computed(()=>({position:"relative",overflow:"hidden",width:y.value?void 0:z.value??"100%",height:y.value?"100%":void 0,display:y.value?"inline-block":void 0})),_=e.computed(()=>({display:"flex",flexDirection:y.value?"column":"row",width:y.value?"100%":"max-content",willChange:"transform",userSelect:"none",position:"relative",zIndex:0})),C=e.computed(()=>Array.from({length:c.value},(r,s)=>s));e.onMounted(()=>{l.value&&F(l.value)});function B(){var M,Q;const r=f.value,s=(M=i.value)==null?void 0:M.getBoundingClientRect(),g=(s==null?void 0:s.width)??0,p=(s==null?void 0:s.height)??0;if(y.value){const $=((Q=r==null?void 0:r.parentElement)==null?void 0:Q.clientHeight)??0;if(r&&$>0&&(r.style.height=`${Math.ceil($)}px`),p>0){u.value=Math.ceil(p);const T=(r==null?void 0:r.clientHeight)??$??p,W=Math.ceil(T/p)+S.COPY_HEADROOM;c.value=Math.max(S.MIN_COPIES,W)}}else if(g>0){a.value=Math.ceil(g);const $=(r==null?void 0:r.clientWidth)??0,T=Math.ceil($/g)+S.COPY_HEADROOM;c.value=Math.max(S.MIN_COPIES,T)}}ie(B,[f,i],()=>[b.value,t.gap,t.logoHeight,y.value]),se(i,B,()=>[b.value,t.gap,t.logoHeight,y.value]),ue(v,()=>x.value,()=>a.value,()=>u.value,()=>d.value,()=>k.value,()=>y.value);function L(){k.value!==void 0&&(d.value=!0)}function I(){k.value!==void 0&&(d.value=!1)}const E={position:"absolute",pointerEvents:"none",zIndex:1};function H(){const r=t.fadeOutColor??"#ffffff";return y.value?{...E,top:"0",left:"0",right:"0",height:"clamp(24px, 8%, 120px)",background:`linear-gradient(to bottom, ${r} 0%, transparent 100%)`}:{...E,top:"0",bottom:"0",left:"0",width:"clamp(24px, 8%, 120px)",background:`linear-gradient(to right, ${r} 0%, transparent 100%)`}}function w(){const r=t.fadeOutColor??"#ffffff";return y.value?{...E,bottom:"0",left:"0",right:"0",height:"clamp(24px, 8%, 120px)",background:`linear-gradient(to top, ${r} 0%, transparent 100%)`}:{...E,top:"0",bottom:"0",right:"0",width:"clamp(24px, 8%, 120px)",background:`linear-gradient(to left, ${r} 0%, transparent 100%)`}}function A(){return{height:`${t.logoHeight}px`,width:"auto",display:"block",objectFit:"contain",userSelect:"none",pointerEvents:"none",...t.scaleOnHover?{transition:"transform 300ms cubic-bezier(0.4, 0, 0.2, 1)"}:{}}}function R(r){if(!t.scaleOnHover)return;const s=r.currentTarget.closest("li"),g=s==null?void 0:s.querySelector("img");g&&(g.style.transform="scale(1.2)")}function V(r){if(!t.scaleOnHover)return;const s=r.currentTarget.closest("li"),g=s==null?void 0:s.querySelector("img");g&&(g.style.transform="")}function q(){return{flex:"none",...y.value?{marginBottom:`${t.gap}px`}:{marginRight:`${t.gap}px`}}}function G(){return{display:"flex",flexDirection:y.value?"column":"row",alignItems:"center",listStyle:"none",margin:"0",padding:"0"}}return(r,s)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"containerRef",ref:f,role:"region","aria-label":n.ariaLabel,class:e.normalizeClass(r.$props.class),style:e.normalizeStyle([h.value,r.$props.style])},[n.fadeOut?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("div",{"aria-hidden":"true","data-testid":"fade-overlay",style:e.normalizeStyle(H())},null,4),e.createElementVNode("div",{"aria-hidden":"true","data-testid":"fade-overlay",style:e.normalizeStyle(w())},null,4)],64)):e.createCommentVNode("",!0),e.createElementVNode("div",{ref_key:"trackRef",ref:v,style:e.normalizeStyle(_.value),onMouseenter:L,onMouseleave:I},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(C.value,g=>(e.openBlock(),e.createElementBlock("ul",{key:g,ref_for:!0,ref:p=>{g===0&&(i.value=p)},role:"list","aria-hidden":g>0?!0:void 0,style:e.normalizeStyle(G())},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(b.value,(p,M)=>(e.openBlock(),e.createElementBlock("li",{key:`${g}-${M}`,role:"listitem",style:e.normalizeStyle(q())},[n.renderItem?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(()=>n.renderItem(p,M)),{key:0})):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[p.href&&e.unref(N)(p.href)?(e.openBlock(),e.createElementBlock("a",{key:0,href:p.href,target:"_blank",rel:"noopener noreferrer","aria-label":p.alt,style:{display:"inline-flex","align-items":"center","text-decoration":"none"},onMouseenter:R,onMouseleave:V},[e.createElementVNode("img",{src:p.url,alt:p.alt,loading:"lazy",decoding:"async",draggable:!1,style:e.normalizeStyle(A())},null,12,me)],40,fe)):(e.openBlock(),e.createElementBlock("span",{key:1,style:{display:"inline-flex","align-items":"center"},onMouseenter:R,onMouseleave:V},[e.createElementVNode("img",{src:p.url,alt:p.alt,loading:"lazy",decoding:"async",draggable:!1,style:e.normalizeStyle(A())},null,12,ve)],32))],64))],4))),128))],12,de))),128))],36)],14,ce))}});exports.QuikturnLogo=ee;exports.QuikturnLogoCarousel=ge;exports.QuikturnLogoGrid=re;exports.QuikturnPlugin=j;exports.useLogoUrl=Y;exports.useQuikturnContext=U;

package/dist/index.d.cts

@@ -0,0 +1,200 @@
+import { App } from 'vue';
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { ComputedRef } from 'vue';
+import { CSSProperties } from 'vue';
+import { DefineComponent } from 'vue';
+import { FormatShorthand } from '@quikturn/logos';
+import { MaybeRefOrGetter } from 'vue';
+import { PublicProps } from 'vue';
+import { SupportedOutputFormat } from '@quikturn/logos';
+import { ThemeOption } from '@quikturn/logos';
+import { VNode } from 'vue';
+
+declare type __VLS_Props = {
+    domain: string;
+    token?: string;
+    baseUrl?: string;
+    size?: number;
+    format?: string;
+    greyscale?: boolean;
+    theme?: string;
+    alt?: string;
+    href?: string;
+    class?: string;
+    style?: CSSProperties;
+    loading?: "lazy" | "eager";
+};
+
+declare type __VLS_Props_2 = {
+    domains?: string[];
+    logos?: LogoConfig[];
+    token?: string;
+    baseUrl?: string;
+    columns?: number;
+    gap?: number;
+    logoSize?: number;
+    logoFormat?: string;
+    logoGreyscale?: boolean;
+    logoTheme?: string;
+    renderItem?: (logo: ResolvedLogo, index: number) => VNode;
+    class?: string;
+    style?: CSSProperties;
+    ariaLabel?: string;
+};
+
+declare type __VLS_Props_3 = QuikturnLogoCarouselProps & {
+    class?: string;
+    style?: CSSProperties;
+};
+
+export { FormatShorthand }
+
+/** Per-logo configuration in carousel/grid components. */
+export declare interface LogoConfig extends LogoOptions {
+    domain: string;
+    href?: string;
+    alt?: string;
+}
+
+/** Options that control logo image generation. */
+export declare interface LogoOptions {
+    size?: number;
+    format?: SupportedOutputFormat | FormatShorthand;
+    greyscale?: boolean;
+    theme?: ThemeOption;
+}
+
+declare interface QuikturnContextValue {
+    token: string;
+    baseUrl?: string;
+}
+
+export declare const QuikturnLogo: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+error: (event: Event) => any;
+load: (event: Event) => any;
+}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
+onError?: ((event: Event) => any) | undefined;
+onLoad?: ((event: Event) => any) | undefined;
+}>, {
+loading: "lazy" | "eager";
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+export declare const QuikturnLogoCarousel: DefineComponent<__VLS_Props_3, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_3> & Readonly<{}>, {
+token: string;
+baseUrl: string;
+domains: string[];
+logos: LogoConfig[];
+gap: number;
+logoSize: number;
+logoFormat: SupportedOutputFormat | FormatShorthand;
+logoGreyscale: boolean;
+logoTheme: ThemeOption;
+renderItem: (logo: ResolvedLogo, index: number) => VNode;
+ariaLabel: string;
+direction: "left" | "right" | "up" | "down";
+width: number | string;
+speed: number;
+pauseOnHover: boolean;
+hoverSpeed: number;
+logoHeight: number;
+fadeOut: boolean;
+fadeOutColor: string;
+scaleOnHover: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {
+containerRef: HTMLDivElement;
+trackRef: HTMLDivElement;
+}, HTMLDivElement>;
+
+/** Props for the QuikturnLogoCarousel component. */
+export declare interface QuikturnLogoCarouselProps {
+    domains?: string[];
+    logos?: LogoConfig[];
+    token?: string;
+    baseUrl?: string;
+    speed?: number;
+    direction?: "left" | "right" | "up" | "down";
+    pauseOnHover?: boolean;
+    hoverSpeed?: number;
+    logoHeight?: number;
+    gap?: number;
+    width?: number | string;
+    fadeOut?: boolean;
+    fadeOutColor?: string;
+    scaleOnHover?: boolean;
+    logoSize?: number;
+    logoFormat?: SupportedOutputFormat | FormatShorthand;
+    logoGreyscale?: boolean;
+    logoTheme?: ThemeOption;
+    renderItem?: (logo: ResolvedLogo, index: number) => VNode;
+    class?: string;
+    style?: CSSProperties;
+    ariaLabel?: string;
+}
+
+export declare const QuikturnLogoGrid: DefineComponent<__VLS_Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<__VLS_Props_2> & Readonly<{}>, {
+columns: number;
+gap: number;
+ariaLabel: string;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
+/** Props for the QuikturnLogoGrid component. */
+export declare interface QuikturnLogoGridProps {
+    domains?: string[];
+    logos?: LogoConfig[];
+    token?: string;
+    baseUrl?: string;
+    columns?: number;
+    gap?: number;
+    logoSize?: number;
+    logoFormat?: SupportedOutputFormat | FormatShorthand;
+    logoGreyscale?: boolean;
+    logoTheme?: ThemeOption;
+    renderItem?: (logo: ResolvedLogo, index: number) => VNode;
+    class?: string;
+    style?: CSSProperties;
+    ariaLabel?: string;
+}
+
+/** Props for the QuikturnLogo component. */
+export declare interface QuikturnLogoProps extends LogoOptions {
+    domain: string;
+    token?: string;
+    baseUrl?: string;
+    alt?: string;
+    href?: string;
+    class?: string;
+    style?: CSSProperties;
+    loading?: "lazy" | "eager";
+}
+
+export declare const QuikturnPlugin: {
+    install(app: App, options: QuikturnPluginOptions): void;
+};
+
+/** Options for the QuikturnPlugin. */
+export declare interface QuikturnPluginOptions {
+    token: string;
+    baseUrl?: string;
+}
+
+/** Internal resolved logo with pre-built URL. */
+export declare interface ResolvedLogo {
+    domain: string;
+    url: string;
+    alt: string;
+    href?: string;
+}
+
+export { SupportedOutputFormat }
+
+export { ThemeOption }
+
+export declare function useLogoUrl(domain: MaybeRefOrGetter<string>, options?: MaybeRefOrGetter<(LogoOptions & {
+    token?: string;
+    baseUrl?: string;
+}) | undefined>): ComputedRef<string>;
+
+export declare function useQuikturnContext(): QuikturnContextValue | undefined;
+
+export { }