@stackonward/cli 0.0.1 → 1.0.0

package/dist/resources/components/vue/ui/Modal.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { watch } from "vue";
+
+interface Props {
+  modelValue: boolean;
+  title?: string;
+  size?: "sm" | "md" | "lg" | "xl";
+  closeOnOverlay?: boolean;
+  closeOnEsc?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: "md",
+  closeOnOverlay: true,
+  closeOnEsc: true,
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  close: [];
+}>();
+
+const close = () => {
+  emit("update:modelValue", false);
+  emit("close");
+};
+
+const handleOverlayClick = () => {
+  if (props.closeOnOverlay) {
+    close();
+  }
+};
+
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === "Escape" && props.closeOnEsc) {
+    close();
+  }
+};
+
+watch(
+  () => props.modelValue,
+  (isOpen) => {
+    if (isOpen) {
+      document.addEventListener("keydown", handleKeydown);
+      document.body.style.overflow = "hidden";
+    } else {
+      document.removeEventListener("keydown", handleKeydown);
+      document.body.style.overflow = "";
+    }
+  },
+);
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="modelValue" class="modal-overlay" @click.self="handleOverlayClick">
+        <div :class="['modal', `modal-${size}`]">
+          <div v-if="title || $slots.header" class="modal-header">
+            <slot name="header">
+              <h3 class="modal-title">{{ title }}</h3>
+            </slot>
+            <button class="modal-close" @click="close">
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+                <path
+                  fill-rule="evenodd"
+                  d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </button>
+          </div>
+          <div class="modal-body">
+            <slot />
+          </div>
+          <div v-if="$slots.footer" class="modal-footer">
+            <slot name="footer" />
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.modal-overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  z-index: 50;
+}
+
+.modal {
+  background-color: white;
+  border-radius: 0.75rem;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  max-height: calc(100vh - 2rem);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.modal-sm {
+  width: 100%;
+  max-width: 24rem;
+}
+
+.modal-md {
+  width: 100%;
+  max-width: 32rem;
+}
+
+.modal-lg {
+  width: 100%;
+  max-width: 48rem;
+}
+
+.modal-xl {
+  width: 100%;
+  max-width: 64rem;
+}
+
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid #e5e7eb;
+}
+
+.modal-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.modal-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  background: none;
+  color: #6b7280;
+  cursor: pointer;
+  border-radius: 0.375rem;
+  transition: all 0.2s ease;
+}
+
+.modal-close:hover {
+  background-color: #f3f4f6;
+  color: #374151;
+}
+
+.modal-body {
+  padding: 1.5rem;
+  overflow-y: auto;
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 1rem 1.5rem;
+  border-top: 1px solid #e5e7eb;
+}
+
+/* Transitions */
+.modal-enter-active,
+.modal-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.modal-enter-active .modal,
+.modal-leave-active .modal {
+  transition: transform 0.2s ease;
+}
+
+.modal-enter-from,
+.modal-leave-to {
+  opacity: 0;
+}
+
+.modal-enter-from .modal,
+.modal-leave-to .modal {
+  transform: scale(0.95);
+}
+</style>

package/dist/resources/components/vue/ui/ScrollArea.vue

@@ -0,0 +1,163 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+interface Props {
+  direction?: "vertical" | "horizontal" | "both";
+  height?: string;
+  width?: string;
+  label?: string;
+  dragScroll?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  direction: "vertical",
+  height: "100%",
+  width: "100%",
+  label: undefined,
+  dragScroll: false,
+});
+
+const emit = defineEmits<{
+  scroll: [position: { x: number; y: number }];
+  reachEnd: [];
+}>();
+
+const viewport = ref<HTMLElement | null>(null);
+let pointerId: number | null = null;
+let startX = 0;
+let startY = 0;
+let startScrollLeft = 0;
+let startScrollTop = 0;
+
+const rootClass = computed(() => [
+  "scroll-area",
+  `scroll-area--${props.direction}`,
+  { "scroll-area--drag": props.dragScroll },
+]);
+
+const rootStyle = computed(() => ({
+  height: props.height,
+  width: props.width,
+}));
+
+function position() {
+  return {
+    x: viewport.value?.scrollLeft ?? 0,
+    y: viewport.value?.scrollTop ?? 0,
+  };
+}
+
+function handleScroll(): void {
+  const current = position();
+  emit("scroll", current);
+  const el = viewport.value;
+  if (!el) return;
+  const atYEnd = el.scrollTop + el.clientHeight >= el.scrollHeight - 1;
+  const atXEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - 1;
+  if (atYEnd || atXEnd) emit("reachEnd");
+}
+
+function scrollTo(x: number, y: number, smooth = true): void {
+  viewport.value?.scrollTo({ left: x, top: y, behavior: smooth ? "smooth" : "auto" });
+}
+
+function pointerDown(event: PointerEvent): void {
+  if (!props.dragScroll || event.button !== 0 || !viewport.value) return;
+  pointerId = event.pointerId;
+  startX = event.clientX;
+  startY = event.clientY;
+  startScrollLeft = viewport.value.scrollLeft;
+  startScrollTop = viewport.value.scrollTop;
+  viewport.value.setPointerCapture(event.pointerId);
+}
+
+function pointerMove(event: PointerEvent): void {
+  if (!props.dragScroll || pointerId !== event.pointerId || !viewport.value) return;
+  viewport.value.scrollLeft = startScrollLeft - (event.clientX - startX);
+  viewport.value.scrollTop = startScrollTop - (event.clientY - startY);
+}
+
+function pointerUp(event: PointerEvent): void {
+  if (pointerId !== event.pointerId || !viewport.value) return;
+  viewport.value.releasePointerCapture(event.pointerId);
+  pointerId = null;
+}
+
+defineExpose({
+  scrollTo,
+  scrollToTop: (smooth = true) => scrollTo(position().x, 0, smooth),
+  scrollToBottom: (smooth = true) => scrollTo(position().x, viewport.value?.scrollHeight ?? 0, smooth),
+  getScrollPosition: position,
+});
+</script>
+
+<template>
+  <div :class="rootClass" :style="rootStyle">
+    <div
+      ref="viewport"
+      class="scroll-area__viewport"
+      :aria-label="label"
+      :tabindex="label ? 0 : undefined"
+      @scroll="handleScroll"
+      @pointerdown="pointerDown"
+      @pointermove="pointerMove"
+      @pointerup="pointerUp"
+      @pointercancel="pointerUp"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.scroll-area {
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.scroll-area__viewport {
+  width: 100%;
+  height: 100%;
+  overscroll-behavior: contain;
+  scrollbar-color: #94a3b8 transparent;
+  scrollbar-width: thin;
+  -webkit-overflow-scrolling: touch;
+}
+
+.scroll-area--vertical .scroll-area__viewport {
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.scroll-area--horizontal .scroll-area__viewport {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.scroll-area--both .scroll-area__viewport {
+  overflow: auto;
+}
+
+.scroll-area--drag .scroll-area__viewport {
+  cursor: grab;
+}
+
+.scroll-area--drag .scroll-area__viewport:active {
+  cursor: grabbing;
+}
+
+.scroll-area__viewport::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.scroll-area__viewport::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.scroll-area__viewport::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: #94a3b8;
+}
+</style>

package/dist/resources/components/vue/ui/Tooltip.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+
+interface Props {
+  text?: string;
+  side?: "top" | "right" | "bottom" | "left";
+  disabled?: boolean;
+  openDelayMs?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  side: "top",
+  disabled: false,
+  openDelayMs: 120,
+});
+
+const open = ref(false);
+let timer: ReturnType<typeof setTimeout> | null = null;
+
+const panelClass = computed(() => `tooltip__panel tooltip__panel--${props.side}`);
+
+function show(): void {
+  if (props.disabled) return;
+  timer = setTimeout(() => {
+    open.value = true;
+  }, props.openDelayMs);
+}
+
+function hide(): void {
+  if (timer) {
+    clearTimeout(timer);
+    timer = null;
+  }
+  open.value = false;
+}
+
+defineExpose({
+  show,
+  hide,
+  open,
+});
+</script>
+
+<template>
+  <span class="tooltip" @mouseenter="show" @mouseleave="hide" @focusin="show" @focusout="hide">
+    <slot name="trigger">
+      <button type="button" class="tooltip__trigger" :aria-label="text || 'More information'">
+        i
+      </button>
+    </slot>
+    <span v-if="open && !disabled" role="tooltip" :class="panelClass">
+      <slot>{{ text }}</slot>
+    </span>
+  </span>
+</template>
+
+<style scoped>
+.tooltip {
+  position: relative;
+  display: inline-flex;
+}
+
+.tooltip__trigger {
+  display: inline-grid;
+  width: 18px;
+  height: 18px;
+  place-items: center;
+  border: 1px solid #cbd5e1;
+  border-radius: 50%;
+  background: #fff;
+  color: #475569;
+  cursor: help;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.tooltip__panel {
+  position: absolute;
+  z-index: 50;
+  width: max-content;
+  max-width: min(260px, calc(100vw - 32px));
+  border: 1px solid #1f2937;
+  border-radius: 6px;
+  background: #111827;
+  color: #fff;
+  padding: 7px 9px;
+  box-shadow: 0 10px 30px rgb(15 23 42 / 0.16);
+  font-size: 13px;
+  line-height: 1.45;
+}
+
+.tooltip__panel--top {
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.tooltip__panel--bottom {
+  top: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.tooltip__panel--left {
+  top: 50%;
+  right: calc(100% + 8px);
+  transform: translateY(-50%);
+}
+
+.tooltip__panel--right {
+  top: 50%;
+  left: calc(100% + 8px);
+  transform: translateY(-50%);
+}
+</style>

package/dist/resources/registry.json

@@ -0,0 +1,158 @@
+{
+  "@stackonward/api-client": {
+    "name": "@stackonward/api-client",
+    "description": "Framework-agnostic HTTP transport core",
+    "type": "npm",
+    "version": "^0.0.2"
+  },
+  "@stackonward/cli": {
+    "name": "@stackonward/cli",
+    "description": "StackOnward project and resource CLI",
+    "type": "npm",
+    "version": "^1.0.0"
+  },
+  "@stackonward/cms-client": {
+    "name": "@stackonward/cms-client",
+    "description": "Typed CMS delivery client",
+    "type": "npm",
+    "version": "^0.0.2"
+  },
+  "@stackonward/cms-nuxt": {
+    "name": "@stackonward/cms-nuxt",
+    "description": "Generic CMS Nuxt runtime",
+    "type": "npm",
+    "version": "^0.0.2"
+  },
+  "@stackonward/commitlint-config": {
+    "name": "@stackonward/commitlint-config",
+    "description": "Shared Conventional Commits configuration",
+    "type": "npm",
+    "version": "^0.1.0"
+  },
+  "@stackonward/composables": {
+    "name": "@stackonward/composables",
+    "description": "Headless Vue composables",
+    "type": "npm",
+    "version": "^0.0.1"
+  },
+  "@stackonward/device-fingerprint": {
+    "name": "@stackonward/device-fingerprint",
+    "description": "Provider-neutral browser fingerprint engine",
+    "type": "npm",
+    "version": "^0.0.1"
+  },
+  "@stackonward/eslint-config": {
+    "name": "@stackonward/eslint-config",
+    "description": "Shared ESLint configuration",
+    "type": "npm",
+    "version": "^1.0.0"
+  },
+  "@stackonward/file": {
+    "name": "@stackonward/file",
+    "description": "Browser file validation and upload primitives",
+    "type": "npm",
+    "version": "^0.0.1"
+  },
+  "@stackonward/identity-browser": {
+    "name": "@stackonward/identity-browser",
+    "description": "Browser client for opaque identity sessions",
+    "type": "npm",
+    "version": "^0.0.1"
+  },
+  "@stackonward/identity-session": {
+    "name": "@stackonward/identity-session",
+    "description": "Identity session contracts and server engine",
+    "type": "npm",
+    "version": "^0.0.1"
+  },
+  "@stackonward/image": {
+    "name": "@stackonward/image",
+    "description": "Browser image and CDN primitives",
+    "type": "npm",
+    "version": "^0.0.1"
+  },
+  "@stackonward/manifest-engine": {
+    "name": "@stackonward/manifest-engine",
+    "description": "Manifest compatibility filtering",
+    "type": "npm",
+    "version": "^0.0.1"
+  },
+  "@stackonward/nuxt-layer-base": {
+    "name": "@stackonward/nuxt-layer-base",
+    "description": "Nuxt transport, session, SEO, and i18n foundation",
+    "type": "layer",
+    "version": "^0.0.2"
+  },
+  "@stackonward/nuxt-site-shell": {
+    "name": "@stackonward/nuxt-site-shell",
+    "description": "Brand-free Nuxt product-site shell",
+    "type": "layer",
+    "version": "^0.0.2"
+  },
+  "@stackonward/onex-cms-client": {
+    "name": "@stackonward/onex-cms-client",
+    "description": "OneX CMS HTTP contract adapter",
+    "type": "npm",
+    "version": "^0.0.2"
+  },
+  "@stackonward/onex-device-context": {
+    "name": "@stackonward/onex-device-context",
+    "description": "OneX browser request-context adapter",
+    "type": "npm",
+    "version": "^0.0.1"
+  },
+  "@stackonward/onex-identity-nuxt": {
+    "name": "@stackonward/onex-identity-nuxt",
+    "description": "Nuxt BFF integration for OneX identity sessions",
+    "type": "npm",
+    "version": "^0.0.1"
+  },
+  "@stackonward/prettier-config": {
+    "name": "@stackonward/prettier-config",
+    "description": "Shared Prettier configuration",
+    "type": "npm",
+    "version": "^0.0.2"
+  },
+  "@stackonward/scheduler": {
+    "name": "@stackonward/scheduler",
+    "description": "Network-aware priority scheduler",
+    "type": "npm",
+    "version": "^0.0.1"
+  },
+  "@stackonward/section-core": {
+    "name": "@stackonward/section-core",
+    "description": "Section schema, registry, bridge, and token core",
+    "type": "npm",
+    "version": "^0.0.1"
+  },
+  "@stackonward/section-renderer-vue": {
+    "name": "@stackonward/section-renderer-vue",
+    "description": "Product-neutral Vue section renderer",
+    "type": "npm",
+    "version": "^0.0.1"
+  },
+  "@stackonward/server-boundary": {
+    "name": "@stackonward/server-boundary",
+    "description": "Server secret and request-topology boundaries",
+    "type": "npm",
+    "version": "^0.0.1"
+  },
+  "@stackonward/stylelint-config": {
+    "name": "@stackonward/stylelint-config",
+    "description": "Shared Stylelint configuration for CSS, Vue, and Tailwind CSS",
+    "type": "npm",
+    "version": "^0.1.0"
+  },
+  "@stackonward/tsconfig": {
+    "name": "@stackonward/tsconfig",
+    "description": "Shared TypeScript configurations",
+    "type": "npm",
+    "version": "^0.0.1"
+  },
+  "@stackonward/utils": {
+    "name": "@stackonward/utils",
+    "description": "Framework-agnostic pure utilities",
+    "type": "npm",
+    "version": "^0.0.1"
+  }
+}