@ntmats/hc-ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,5 @@
+Copyright (c) 2026 Mateus Targino. All rights reserved.
+
+This package is published so that HCUI and Arena can install it. No license is
+granted to use, copy, modify or distribute it outside those products without
+written permission from the copyright holder.

package/README.md

@@ -1,3 +1,27 @@
-# Temporary Holding Version
+# @ntmats/hc-ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Imported as `@hc/ui`: `npm install --save-exact @hc/ui@npm:@ntmats/hc-ui@<version>` (React 18+ is a peer dependency). Experimental 0.x API.
+
+React presentation primitives, with React and React DOM supplied by each consumer. The initial contract has no router, data, persistence, icon-library or product-specific dependencies.
+
+```ts
+import { Button, Chip, IconButton, SegmentedControl, Skeleton, Surface } from '@hc/ui';
+import '@hc/ui/styles.css';
+import '@hc/tokens/css';
+```
+
+Place `data-hc-ds` and the active `data-theme="light|dark"` on an ancestor. Controls use CSS variables from `@hc/tokens`; they do not set global fonts, resets, page backgrounds or theme state. Provide icons and localized labels from the application.
+
+`SegmentedControl` is a controlled, single-selection radiogroup. Tab enters at the selected option, every arrow key moves and selects (radio group pattern), Home/End move to the first/last enabled option, and disabled options are skipped. Its density can be comfortable (38px, HCUI view toggles) or compact (32px). `hideLabels` renders icon-only options at 40px wide; labels remain the accessible names and tooltips. Typography uses the variable-font tokens (`font-weight-control`, `font-stretch-condensed`) and the shared `rond` roundness; load Google Sans Flex with the `wdth` and `ROND` axes. A caller owns persistence and any URL state.
+
+`Surface` only supplies a semantic presentational role (`page`, `main`, `content`, `elevated`, or `overlay`). It does not add positioning, z-index, backdrop blur or modal behavior.
+
+Styles are not in a cascade layer: unlayered consumer resets (HCUI's `button` rule, Tailwind preflight) would override layered declarations. Customize through props and tokens, not overrides of internal classes.
+
+HCUI uses `SegmentedControl` through its `ViewToggle` wrapper. During the bootstrap it compiles the source through Vite/TypeScript aliases; switch to the pinned package once published.
+
+`Button` is a pill with `secondary` (default), `primary`, `outline` and `danger` variants, `md`/`lg` sizes, an optional leading `icon` and `fullWidth`. `IconButton` requires `label` (accessible name and tooltip) and comes in 36/40/44px; the 36px size keeps a 44px touch target. `Chip` is a filter/option pill; pass `selected` to make it a toggle (`aria-pressed`), omit it for a plain action. All three read the shared `rond` roundness, default to `type="button"`, forward refs, scale slightly on press, show the shared focus ring and drop motion under `prefers-reduced-motion`.
+
+`Skeleton` is a static shape that pulses, hidden from assistive technology; the enclosing region announces loading once. Its base rule has zero specificity (`:where`), so the consumer sizes each shape with `width`/`height` or its own class.
+
+License: `UNLICENSED` (HCUI and Arena only). Component state and styles still need validation in Arena before a 1.0.

package/dist/index.d.ts

@@ -0,0 +1,62 @@
+import { type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+export type SurfaceTone = 'page' | 'main' | 'content' | 'elevated' | 'overlay';
+export interface SurfaceProps extends HTMLAttributes<HTMLDivElement> {
+    tone?: SurfaceTone;
+}
+/** Semantic color role only; placement, elevation and overlay behavior stay local. */
+export declare function Surface({ tone, className, ...props }: SurfaceProps): import("react/jsx-runtime").JSX.Element;
+export interface SegmentedOption<T extends string> {
+    value: T;
+    label: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+export interface SegmentedControlProps<T extends string> extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    label: string;
+    value: T;
+    options: readonly SegmentedOption<T>[];
+    onChange: (value: T) => void;
+    density?: 'comfortable' | 'compact';
+    orientation?: 'horizontal' | 'vertical';
+    /** Icon-only options: labels stay as accessible names and tooltips. */
+    hideLabels?: boolean;
+}
+/** Controlled, single-choice control with radio semantics and roving focus. */
+export declare function SegmentedControl<T extends string>({ label, value, options, onChange, density, orientation, hideLabels, className, ...props }: SegmentedControlProps<T>): import("react/jsx-runtime").JSX.Element;
+export type ButtonVariant = 'secondary' | 'primary' | 'outline' | 'danger';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: 'md' | 'lg';
+    /** Decorative icon before the label; pass it already sized (18px in HCUI). */
+    icon?: ReactNode;
+    fullWidth?: boolean;
+}
+/** Pill button. The caller supplies the label text and handles the action. */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'aria-label'> {
+    /** Accessible name and tooltip; required because the button has no text. */
+    label: string;
+    icon: ReactNode;
+    /** 36, 40 or 44px. The 36px size keeps a 44px touch target. */
+    size?: 'sm' | 'md' | 'lg';
+    tone?: 'primary' | 'secondary';
+}
+/** Round icon-only button (back, close, options). */
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface ChipProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Toggle state for filters; omit for a plain action chip. */
+    selected?: boolean;
+    icon?: ReactNode;
+}
+/** Filter or option chip. Selected chips are filled with the accent color. */
+export declare const Chip: import("react").ForwardRefExoticComponent<ChipProps & import("react").RefAttributes<HTMLButtonElement>>;
+export interface SkeletonProps extends HTMLAttributes<HTMLSpanElement> {
+    width?: string | number;
+    height?: string | number;
+    circle?: boolean;
+}
+/**
+ * Static placeholder shape. It is hidden from assistive technology: the
+ * enclosing region announces loading once (role="status" + label).
+ */
+export declare function Skeleton({ width, height, circle, className, style, ...props }: SkeletonProps): import("react/jsx-runtime").JSX.Element;

package/dist/index.js

@@ -0,0 +1,143 @@
+// src/index.tsx
+import { forwardRef, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Surface({ tone = "content", className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { ...props, className: ["hc-ui-surface", className].filter(Boolean).join(" "), "data-tone": tone });
+}
+function SegmentedControl({
+  label,
+  value,
+  options,
+  onChange,
+  density = "comfortable",
+  orientation = "horizontal",
+  hideLabels = false,
+  className,
+  ...props
+}) {
+  const buttons = useRef([]);
+  const selectedIndex = options.findIndex((option) => option.value === value && !option.disabled);
+  const tabStop = selectedIndex >= 0 ? selectedIndex : options.findIndex((option) => !option.disabled);
+  const move = (index, key) => {
+    if (!["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp", "Home", "End"].includes(key)) return false;
+    const direction = key === "ArrowRight" || key === "ArrowDown" ? 1 : -1;
+    let next = key === "Home" ? 0 : key === "End" ? options.length - 1 : index;
+    if (key !== "Home" && key !== "End") {
+      for (let tries = 0; tries < options.length; tries += 1) {
+        next = (next + direction + options.length) % options.length;
+        if (!options[next].disabled) break;
+      }
+    } else if (options[next]?.disabled) {
+      const step = key === "Home" ? 1 : -1;
+      while (next >= 0 && next < options.length && options[next].disabled) next += step;
+    }
+    if (next < 0 || next >= options.length || options[next]?.disabled) return true;
+    onChange(options[next].value);
+    buttons.current[next]?.focus();
+    return true;
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: ["hc-ui-segmented", className].filter(Boolean).join(" "),
+      role: "radiogroup",
+      "aria-label": label,
+      "aria-orientation": orientation,
+      "data-density": density,
+      "data-orientation": orientation,
+      "data-labels": hideLabels ? "hidden" : void 0,
+      children: options.map((option, index) => {
+        const selected = option.value === value;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: (element) => {
+              buttons.current[index] = element;
+            },
+            type: "button",
+            role: "radio",
+            "aria-checked": selected,
+            "aria-label": option.label,
+            title: hideLabels ? option.label : void 0,
+            disabled: option.disabled,
+            tabIndex: !option.disabled && index === tabStop ? 0 : -1,
+            className: "hc-ui-segmented__option",
+            "data-selected": selected || void 0,
+            onClick: () => !option.disabled && onChange(option.value),
+            onKeyDown: (event) => {
+              if (move(index, event.key)) event.preventDefault();
+            },
+            children: [
+              option.icon && /* @__PURE__ */ jsx("span", { className: "hc-ui-segmented__icon", "aria-hidden": "true", children: option.icon }),
+              !hideLabels && /* @__PURE__ */ jsx("span", { className: "hc-ui-segmented__label", children: option.label })
+            ]
+          },
+          option.value
+        );
+      })
+    }
+  );
+}
+var classes = (...names) => names.filter(Boolean).join(" ");
+var Button = forwardRef(function Button2({ variant = "secondary", size = "md", icon, fullWidth = false, type = "button", className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ...props,
+      ref,
+      type,
+      className: classes("hc-ui-button", className),
+      "data-variant": variant,
+      "data-size": size,
+      "data-full-width": fullWidth || void 0,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "hc-ui-button__icon", "aria-hidden": "true", children: icon }),
+        children
+      ]
+    }
+  );
+});
+var IconButton = forwardRef(function IconButton2({ label, icon, size = "md", tone = "primary", type = "button", title, className, ...props }, ref) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ...props,
+      ref,
+      type,
+      "aria-label": label,
+      title: title ?? label,
+      className: classes("hc-ui-icon-button", className),
+      "data-size": size,
+      "data-tone": tone,
+      children: /* @__PURE__ */ jsx("span", { className: "hc-ui-icon-button__icon", "aria-hidden": "true", children: icon })
+    }
+  );
+});
+var Chip = forwardRef(function Chip2({ selected, icon, type = "button", className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs("button", { ...props, ref, type, "aria-pressed": selected, className: classes("hc-ui-chip", className), children: [
+    icon && /* @__PURE__ */ jsx("span", { className: "hc-ui-chip__icon", "aria-hidden": "true", children: icon }),
+    children
+  ] });
+});
+function Skeleton({ width, height, circle = false, className, style, ...props }) {
+  const size = { ...width !== void 0 && { width }, ...height !== void 0 && { height }, ...style };
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      ...props,
+      "aria-hidden": "true",
+      className: classes("hc-ui-skeleton", className),
+      "data-shape": circle ? "circle" : void 0,
+      style: Object.keys(size).length ? size : void 0
+    }
+  );
+}
+export {
+  Button,
+  Chip,
+  IconButton,
+  SegmentedControl,
+  Skeleton,
+  Surface
+};

package/dist/styles.css

@@ -0,0 +1,221 @@
+/* Scoped to package-owned classes; consumers opt into tokens via data-hc-ds.
+   No cascade layer: unlayered consumer resets (HCUI's button rule, Tailwind
+   preflight) would otherwise override every component declaration. */
+[data-hc-ds] .hc-ui-surface {
+  color: var(--hc-color-text-primary);
+}
+
+[data-hc-ds] .hc-ui-surface[data-tone='page'] { background: var(--hc-color-bg-page); }
+[data-hc-ds] .hc-ui-surface[data-tone='main'] { background: var(--hc-color-bg-main); }
+[data-hc-ds] .hc-ui-surface[data-tone='content'] {
+  background: var(--hc-color-bg-surface);
+  border: 1px solid var(--hc-color-border);
+  border-radius: var(--hc-radius-md);
+}
+[data-hc-ds] .hc-ui-surface[data-tone='elevated'] {
+  background: var(--hc-color-bg-elevated);
+  border: 1px solid var(--hc-color-border);
+  border-radius: var(--hc-radius-md);
+  box-shadow: var(--hc-shadow-card);
+}
+[data-hc-ds] .hc-ui-surface[data-tone='overlay'] {
+  background: var(--hc-color-bg-elevated);
+  border: 1px solid var(--hc-color-border);
+  border-radius: var(--hc-radius-md);
+  box-shadow: var(--hc-shadow-float);
+}
+
+/* Visual reference: HCUI segmented track (3px inset, 2px gap, raised knob). */
+[data-hc-ds] .hc-ui-segmented {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  max-width: 100%;
+  padding: 3px;
+  background: var(--hc-color-bg-muted);
+  border-radius: var(--hc-radius-full);
+}
+
+[data-hc-ds] .hc-ui-segmented[data-orientation='vertical'] { flex-direction: column; align-items: stretch; }
+
+[data-hc-ds] .hc-ui-segmented__option {
+  appearance: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-width: 0;
+  min-height: 38px;
+  margin: 0;
+  padding: 0 var(--hc-space-3);
+  color: var(--hc-color-text-secondary);
+  font-family: var(--hc-font-body);
+  font-size: var(--hc-font-size-sm);
+  font-weight: var(--hc-font-weight-control);
+  font-stretch: var(--hc-font-stretch-condensed);
+  font-variation-settings: 'ROND' var(--hc-rond);
+  line-height: var(--hc-line-height-md);
+  white-space: nowrap;
+  background: transparent;
+  border: 0;
+  border-radius: var(--hc-radius-full);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  /* The variable font weight animates, so the chosen option thickens smoothly. */
+  transition: background-color var(--hc-transition-fast), color var(--hc-transition-fast),
+    box-shadow var(--hc-transition-fast), font-weight 220ms var(--hc-ease-standard);
+}
+
+[data-hc-ds] .hc-ui-segmented[data-density='compact'] .hc-ui-segmented__option { min-height: 32px; }
+
+[data-hc-ds] .hc-ui-segmented[data-labels='hidden'] .hc-ui-segmented__option {
+  width: 40px;
+  padding: 0;
+}
+
+[data-hc-ds] .hc-ui-segmented__option[data-selected] {
+  color: var(--hc-color-text-primary);
+  background: var(--hc-color-bg-surface);
+  box-shadow: var(--hc-shadow-knob);
+  font-weight: var(--hc-font-weight-bold);
+}
+
+[data-hc-ds] .hc-ui-segmented__option:focus-visible {
+  outline: 2px solid var(--hc-focus-ring);
+  outline-offset: 2px;
+}
+
+[data-hc-ds] .hc-ui-segmented__option:disabled { opacity: 0.48; cursor: not-allowed; }
+[data-hc-ds] .hc-ui-segmented__icon { display: inline-flex; flex: 0 0 auto; }
+[data-hc-ds] .hc-ui-segmented__icon svg { display: block; width: 18px; height: 18px; }
+[data-hc-ds] .hc-ui-segmented__label { overflow: hidden; text-overflow: ellipsis; }
+
+/* Shared by Button, IconButton and Chip: reset, touch and press feedback. */
+[data-hc-ds] :is(.hc-ui-button, .hc-ui-icon-button, .hc-ui-chip) {
+  appearance: none;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  border: 0;
+  border-radius: var(--hc-radius-full);
+  font-family: var(--hc-font-body);
+  font-variation-settings: 'ROND' var(--hc-rond);
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  touch-action: manipulation;
+  transition-property: transform, background-color, box-shadow, color, opacity;
+  transition-duration: var(--hc-dur-short);
+  transition-timing-function: var(--hc-ease-standard);
+}
+
+[data-hc-ds] :is(.hc-ui-button, .hc-ui-icon-button, .hc-ui-chip):active:not(:disabled) { transform: scale(0.97); }
+
+[data-hc-ds] :is(.hc-ui-button, .hc-ui-icon-button, .hc-ui-chip):focus-visible {
+  outline: 2px solid var(--hc-focus-ring);
+  outline-offset: 2px;
+}
+
+[data-hc-ds] :is(.hc-ui-button__icon, .hc-ui-icon-button__icon, .hc-ui-chip__icon) { display: inline-flex; flex: 0 0 auto; }
+[data-hc-ds] :is(.hc-ui-button__icon, .hc-ui-icon-button__icon, .hc-ui-chip__icon) svg { display: block; }
+
+/* State layer: translucent veil on hover/press (Button and IconButton). */
+[data-hc-ds] :is(.hc-ui-button, .hc-ui-icon-button) { overflow: hidden; }
+[data-hc-ds] :is(.hc-ui-button, .hc-ui-icon-button)::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background-color: currentColor;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--hc-dur-short) var(--hc-ease-standard);
+}
+@media (hover: hover) {
+  [data-hc-ds] :is(.hc-ui-button, .hc-ui-icon-button):hover:not(:disabled)::after { opacity: 0.05; }
+}
+[data-hc-ds] :is(.hc-ui-button, .hc-ui-icon-button):active:not(:disabled)::after { opacity: 0.09; }
+
+/* Button — HCUI btn-base / btn-primary / btn-outline / btn-danger / btn-lg. */
+[data-hc-ds] .hc-ui-button {
+  gap: var(--hc-space-2);
+  min-height: var(--hc-control-height-md);
+  padding: 0 var(--hc-space-5);
+  color: var(--hc-color-text-primary);
+  background-color: var(--hc-color-bg-muted);
+  font-size: var(--hc-font-size-md);
+  font-weight: var(--hc-font-weight-semibold);
+  font-stretch: var(--hc-font-stretch-button);
+  font-variation-settings: 'ROND' var(--hc-rond);
+  line-height: var(--hc-line-height-md);
+}
+/* The label narrows slightly on press (wdth axis). */
+[data-hc-ds] .hc-ui-button:active:not(:disabled) { font-stretch: var(--hc-font-stretch-pressed); }
+[data-hc-ds] .hc-ui-button[data-variant='primary'] { color: var(--hc-color-text-inverse); background-color: var(--hc-color-accent); }
+[data-hc-ds] .hc-ui-button[data-variant='outline'] { background-color: transparent; box-shadow: inset 0 0 0 1px var(--hc-color-border-strong); }
+[data-hc-ds] .hc-ui-button[data-variant='danger'] { color: var(--hc-color-text-on-danger); background-color: var(--hc-color-bg-danger); }
+[data-hc-ds] .hc-ui-button[data-size='lg'] { min-height: var(--hc-control-height-lg); padding: 0 var(--hc-space-6); font-size: var(--hc-font-size-base); }
+[data-hc-ds] .hc-ui-button[data-full-width] { width: 100%; }
+[data-hc-ds] .hc-ui-button:disabled { opacity: 0.4; cursor: default; }
+
+/* IconButton — HCUI icon-button / close-button. */
+[data-hc-ds] .hc-ui-icon-button {
+  flex: 0 0 auto;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  color: var(--hc-color-text-primary);
+  background-color: var(--hc-color-bg-muted);
+}
+[data-hc-ds] .hc-ui-icon-button[data-size='sm'] { width: 36px; height: 36px; overflow: visible; }
+[data-hc-ds] .hc-ui-icon-button[data-size='lg'] { width: 44px; height: 44px; }
+[data-hc-ds] .hc-ui-icon-button[data-tone='secondary'] { color: var(--hc-color-text-secondary); }
+/* 36px keeps a 44px touch target; the veil stays clipped to the circle. */
+[data-hc-ds] .hc-ui-icon-button[data-size='sm']::before { content: ''; position: absolute; inset: -4px; }
+[data-hc-ds] .hc-ui-icon-button:disabled { opacity: 0.4; cursor: default; }
+
+/* Chip — HCUI chip / chip-active. */
+[data-hc-ds] .hc-ui-chip {
+  flex: 0 0 auto;
+  gap: 6px;
+  min-height: var(--hc-control-height-chip);
+  padding: 0 14px;
+  color: var(--hc-color-text-primary);
+  background-color: var(--hc-color-bg-surface);
+  box-shadow: inset 0 0 0 1px var(--hc-color-border-strong);
+  font-size: var(--hc-font-size-sm);
+  font-weight: var(--hc-font-weight-medium);
+  line-height: var(--hc-line-height-sm);
+}
+@media (hover: hover) {
+  [data-hc-ds] .hc-ui-chip:hover:not(:disabled) { background-color: var(--hc-color-bg-muted); }
+  [data-hc-ds] .hc-ui-chip[aria-pressed='true']:hover:not(:disabled) { background-color: var(--hc-color-accent); }
+}
+[data-hc-ds] .hc-ui-chip[aria-pressed='true'] { color: var(--hc-color-text-inverse); background-color: var(--hc-color-accent); box-shadow: none; }
+[data-hc-ds] .hc-ui-chip:disabled { opacity: 0.4; cursor: default; }
+
+/* Skeleton — zero specificity on purpose: the consumer sizes each shape. */
+@keyframes hc-ui-skeleton-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.55; }
+}
+:where([data-hc-ds] .hc-ui-skeleton) {
+  display: block;
+  height: 12px;
+  max-width: 100%;
+  border-radius: var(--hc-radius-xs);
+  background-color: var(--hc-color-bg-muted);
+  pointer-events: none;
+  animation: hc-ui-skeleton-pulse 1.4s ease-in-out infinite;
+}
+:where([data-hc-ds] .hc-ui-skeleton[data-shape='circle']) { border-radius: var(--hc-radius-full); }
+
+@media (prefers-reduced-motion: reduce) {
+  [data-hc-ds] .hc-ui-segmented__option { transition: none; }
+  [data-hc-ds] :is(.hc-ui-button, .hc-ui-icon-button, .hc-ui-chip) { transition: none; }
+  [data-hc-ds] :is(.hc-ui-button, .hc-ui-icon-button, .hc-ui-chip):active:not(:disabled) { transform: none; }
+  :where([data-hc-ds] .hc-ui-skeleton) { animation: none; }
+}

package/package.json

@@ -1,6 +1,33 @@
 {
   "name": "@ntmats/hc-ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Shared HCUI/Arena React presentation primitives.",
+  "license": "UNLICENSED",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "scripts": {
+    "prepack": "node ../../scripts/build-ui.mjs"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  }
+}