@fy-/pixi-vue

Shared TW4 Vue 3 component library for pixilab clients (lens, timbre, …).

Provides the small set of UX building blocks we want consistent across every pixilab service: quota chip, paginated media history, top-level mode tabs, image upload widget, plus the matching composables (usePixiQuota, usePixiHistory) and a pixiFetch helper that normalises pixilab-server's FastAPI-shape errors into a typed PixiAPIError.

Install

This lib lives next to the consuming clients in the pixilab workspace. Wire it via pnpm link in development or as a workspace dep once the clients move into a monorepo.

{
  "dependencies": {
    "@fy-/pixi-vue": "workspace:^"
  }
}

Peer requirements

• vue ≥ 3.5
• @fy-/fws-vue-core ≥ 3.0.27
• @fy-/fws-vue-tw4 ≥ 3.0.13
• tailwindcss ≥ 4.0

Usage

<script setup lang="ts">
import {
  PixiTabs,
  PixiQuotaChip,
  PixiHistoryList,
  usePixiQuota,
} from '@fy-/pixi-vue'

const API_BASE = '/_special/rest/Pixi/api'
const mode = ref<'gen' | 'edit' | 'history'>('gen')

const imgQuota = usePixiQuota('image', { apiBase: API_BASE })
</script>

<template>
  <PixiTabs
    v-model="mode"
    :tabs="[
      { value: 'gen', label: 'Generate' },
      { value: 'edit', label: 'Edit' },
      { value: 'history', label: 'History' },
    ]"
  />
  <PixiQuotaChip
    type="image"
    :used="imgQuota.used.value"
    :total="imgQuota.total.value"
    :loading="imgQuota.loading.value"
  />
  <PixiHistoryList
    v-if="mode === 'history'"
    type="image"
    :api-base="API_BASE"
    @edit="loadIntoEdit"
  />
</template>

Asset URLs

History items only carry an fws_uuid and a type discriminator. Use pixiAssetURL(fws_uuid, type) to build the m.pixilab.ai URL — defaults to wav for voice, mp3 for music, png for image / image_edit.

m.pixilab.ai is the public FWS asset CDN. Three URL shapes work: /uuid (bare, content-negotiated), /uuid.ext (explicit), and /uuid/scale_ratio~WxH.webp (responsive variant).