@revenexx/studio-shared 0.1.0

package/components/Shared/ViewTab.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps<{
+  active?: boolean
+  icon?: unknown
+  label: string
+}>()
+</script>
+
+<template>
+  <button
+    type="button"
+    class="group flex items-center gap-1.5 rounded-md px-2 py-1 text-sm font-medium transition-colors"
+    :class="active
+      ? 'bg-[#f3f1fa] text-[#0B0522]'
+      : 'text-foreground/70 hover:bg-muted/50 hover:text-foreground'"
+  >
+    <component
+      :is="icon"
+      v-if="icon"
+      :size="12"
+      :stroke-width="2"
+      class="shrink-0"
+    />
+    <span class="whitespace-nowrap">{{ label }}</span>
+  </button>
+</template>

package/components/Shared/Wizard.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+/**
+ * Multi-step wizard shell (PE-114). Renders a Stepper header and a slot
+ * for the active step's content, with Back / Next / Finish controls.
+ * Steps are declarative; the parent owns each step's fields and can
+ * gate advancement with `canAdvance`. A reusable replacement for the
+ * inline-cards pattern used by the create flows.
+ *
+ * Usage:
+ *   <Wizard :steps="steps" v-model="step" :can-advance="valid" @finish="submit">
+ *     <template #default="{ step }">…fields for `step.key`…</template>
+ *   </Wizard>
+ */
+import { Button } from '@revenexx/studio'
+
+interface Step { key: string, title: string, description?: string }
+
+const props = withDefaults(defineProps<{
+  steps: Step[]
+  modelValue?: number
+  /** Gate the Next/Finish button for the current step. */
+  canAdvance?: boolean
+  busy?: boolean
+}>(), { modelValue: 0, canAdvance: true, busy: false })
+
+const emit = defineEmits<{ 'update:modelValue': [number], 'finish': [] }>()
+
+const index = computed({
+  get: () => props.modelValue,
+  set: v => emit('update:modelValue', v),
+})
+
+const isFirst = computed(() => index.value === 0)
+const isLast = computed(() => index.value === props.steps.length - 1)
+const activeStep = computed(() => props.steps[index.value]!)
+
+function back() { if (!isFirst.value) index.value-- }
+function next() {
+  if (!props.canAdvance || props.busy) return
+  if (isLast.value) emit('finish')
+  else index.value++
+}
+// Allow jumping back to a completed step via the stepper header.
+function goTo(i: number) { if (i < index.value) index.value = i }
+</script>
+
+<template>
+  <div class="space-y-5">
+    <!-- Go-Live-style stepper: a fill bar + label per step, completed steps
+         are clickable to jump back. -->
+    <div class="flex gap-3">
+      <div
+        v-for="(s, i) in steps"
+        :key="s.key"
+        class="flex-1"
+        :class="i < index ? 'cursor-pointer' : ''"
+        @click="goTo(i)"
+      >
+        <div class="h-1 rounded-full transition-colors" :class="i <= index ? 'bg-primary' : 'bg-border'" />
+        <div class="mt-2 text-xs font-medium" :class="i <= index ? 'text-primary' : 'text-muted-foreground'">Step {{ i + 1 }}</div>
+        <div class="text-sm" :class="i <= index ? 'text-[#0B0522]' : 'text-muted-foreground'">{{ s.title }}</div>
+      </div>
+    </div>
+
+    <div>
+      <slot :step="activeStep" :index="index" />
+    </div>
+
+    <div class="flex items-center justify-between border-t pt-3">
+      <!-- Custom footer (e.g. multiple finish actions on a review step). Falls
+           back to the standard Back / Next·Finish pair. -->
+      <slot name="footer" :back="back" :next="next" :is-first="isFirst" :is-last="isLast" :can-advance="canAdvance" :busy="busy" :index="index">
+        <Button variant="ghost" :disabled="isFirst || busy" @click="back">Back</Button>
+        <Button :disabled="!canAdvance || busy" class="gap-1" @click="next">
+          {{ isLast ? 'Finish' : 'Next' }}
+        </Button>
+      </slot>
+    </div>
+  </div>
+</template>

package/composables/usePlatformAuth.ts

@@ -0,0 +1,35 @@
+/**
+ * Platform auth provider — the seam that lets a studio surface run either
+ * inside the full cockpit or standalone.
+ *
+ * This is the **standalone default**: it sources a bearer token from runtime
+ * config (`NUXT_PUBLIC_DEV_TOKEN`) or `localStorage['console.token']`. The
+ * full cockpit ships an override at `app/composables/usePlatformAuth.ts`
+ * (app-level auto-imports take precedence over this layer) that returns the
+ * real Appwrite/Console-sourced operator token.
+ *
+ * Studio modules (e.g. `@revenexx/studio-integrations`) call this instead of
+ * `useConsoleAuth` directly, so they carry no cockpit-only dependency.
+ */
+export interface PlatformAuth {
+  getToken: () => Promise<string | null>
+}
+
+export function usePlatformAuth(): PlatformAuth {
+  const config = useRuntimeConfig()
+  return {
+    async getToken() {
+      const fromConfig = (config.public.devToken as string | undefined) || null
+      if (fromConfig) return fromConfig
+      if (import.meta.client) {
+        try {
+          return localStorage.getItem('console.token')
+        }
+        catch {
+          return null
+        }
+      }
+      return null
+    },
+  }
+}

package/composables/usePlatformTenant.ts

@@ -0,0 +1,35 @@
+import { computed, ref } from 'vue'
+import type { Ref } from 'vue'
+
+/**
+ * Platform tenant provider — companion to `usePlatformAuth`.
+ *
+ * Standalone default: the active tenant slug comes from runtime config
+ * (`NUXT_PUBLIC_DEV_TENANT`) or `localStorage['cockpit.devTenant']`. The full
+ * cockpit overrides this at `app/composables/usePlatformTenant.ts` to return
+ * the real active-tenant slug from `useConsoleTenants`.
+ */
+export interface PlatformTenant {
+  slug: Ref<string | null>
+  load: () => Promise<void>
+}
+
+export function usePlatformTenant(): PlatformTenant {
+  const config = useRuntimeConfig()
+  const stored = ref<string | null>(null)
+  if (import.meta.client) {
+    try {
+      stored.value = localStorage.getItem('cockpit.devTenant')
+    }
+    catch {
+      stored.value = null
+    }
+  }
+  const slug = computed<string | null>(() => (config.public.devTenant as string | undefined) || stored.value)
+  return {
+    slug: slug as unknown as Ref<string | null>,
+    async load() {
+      // no-op in standalone; the slug is static from config/localStorage.
+    },
+  }
+}

package/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Type-level barrel for `@revenexx/studio-shared`.
+ *
+ * The shell primitive *components* auto-import by bare name via the Nuxt
+ * layer (see `nuxt.config.ts`). This barrel exposes the *types* consumers
+ * need to import explicitly — DataTable column/filter/sort types and the
+ * SidebarNav section/item shapes.
+ */
+export type * from './components/DataTable/types'
+export type { SidebarNavItem, SidebarNavSection } from './components/Shared/SidebarNav.vue'
+export type { PlatformAuth } from './composables/usePlatformAuth'
+export type { PlatformTenant } from './composables/usePlatformTenant'

package/nuxt.config.ts

@@ -0,0 +1,23 @@
+import { fileURLToPath } from 'node:url'
+import { dirname, join } from 'node:path'
+
+const currentDir = dirname(fileURLToPath(import.meta.url))
+
+/**
+ * Shared cockpit shell primitives, provided as a Nuxt layer.
+ *
+ * Components are auto-imported by their **bare** name (`pathPrefix: false`),
+ * so `<PageHeader>`, `<DataTable>`, `<SidebarNav>`, `<StateCard>`, `<TabBar>`,
+ * … resolve without an explicit import — matching how the cockpit already
+ * uses them. Type-level exports (DataTable column/filter types,
+ * SidebarNavSection) come from the package barrel `@revenexx/studio-shared`.
+ */
+export default defineNuxtConfig({
+  $meta: {
+    name: 'studio-shared',
+    description: 'Shared cockpit shell primitives + design-system wiring.',
+  },
+  components: [
+    { path: join(currentDir, 'components'), pathPrefix: false },
+  ],
+})

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@revenexx/studio-shared",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Shared revenexx Studio shell primitives (PageHeader, SidebarNav, StateCard, DataTable, …) + the platform provider contract (usePlatformAuth/usePlatformTenant). A Nuxt layer — extend it, then add a studio module.",
+  "main": "./nuxt.config.ts",
+  "exports": {
+    ".": {
+      "types": "./index.ts",
+      "import": "./index.ts"
+    },
+    "./nuxt.config": "./nuxt.config.ts"
+  },
+  "files": [
+    "nuxt.config.ts",
+    "index.ts",
+    "components",
+    "composables"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@revenexx/studio": "*",
+    "nuxt": "^4.0.0",
+    "vue": "^3.5.0"
+  }
+}