Skip to content

Implement Zo's direction notes: split profile/website, real SDKs, iqui kit#3

Open
mega123-art wants to merge 6 commits into
mainfrom
feature/zo-plan-implementation
Open

Implement Zo's direction notes: split profile/website, real SDKs, iqui kit#3
mega123-art wants to merge 6 commits into
mainfrom
feature/zo-plan-implementation

Conversation

@mega123-art

Copy link
Copy Markdown

Summary

Implements Zo's direction notes (ZO_PLAN.md) end to end. Splits the
repo into its two real products — profiles (network identity) and websites
(authored pages) — backs each with the correct published SDK, and adds an own
themeable UI kit. Everything verified against the actual upstream repos
(IQCoreTeam/iq-wide-web, @iqlabs-official/*), not guessed.

tsc --noEmit clean. next build clean (all 8 routes).

Action items from ZO_PLAN.md

# Item Status
1 Swap hand-rolled chain layer for @iqlabs-official/git-sdk
2 Profiles go through the iq-wide-web profile system
3 Keep website export-HTML-and-push, backed by git-sdk
4 examples/ OSS builders + build our editor (Puck)
5 Vibe-code our own react95-style themeable UI lib

What changed

Websites — real on-chain git push (§0, §2, §3)

  • lib/iqlabs.ts uses GitClient from @iqlabs-official/git-sdk/browser. Commits
    index.html + iqpages.json (PagesConfig), then deployPages() — the SDK's
    intended pages-deploy flow. Puck source persisted as puck.json so a published
    site can be re-opened and edited from chain.
  • Visual builder: examples/ study of GrapesJS / Craft.js / Puck; Puck wired as the
    live editor (lib/puck-config.tsx, lib/puck-export.ts, components/website/).

Profiles — written through the real iq-wide-web system (§1)

This is the substantive correctness fix. The previous pass wrote profiles to a
git-sdk repo as iqprofile.json with a custom {version, format, data, theme}
shape — which iq-wide-web cannot read. Verified against
iq-wide-web/src/lib/profile/use-profile-editor.ts and rewrote to match it exactly:

  • Shape is now iq-wide-web's ProfileMeta: { name, bio?, profilePicture?, socials? }, socials keyed by its SocialKey union
    (twitter|github|website|linkedin|telegram|discord|email).
  • Write path is now the same three steps iq-wide-web uses: ensure the
    iqprofile-root DbRoot exists → writer.codeIn(json)writer.updateUserMetadata(txId)
    onto the caller's user PDA. Not a git repo. Program id + root id copied from
    iq-wide-web/src/lib/constants.ts (env-overridable).
  • Result: iq-wide-web's useProfile resolves the same wallet → this metadata, so the
    profile renders identically on every IQ surface. One source of truth.
  • The react95 theme is kept as an additive field on the JSON — iq-wide-web's
    JSON.parse ignores unknown keys (it applies its own global theme), so it
    round-trips harmlessly while theme-aware renderers can pick it up. Honors §1's
    theme intent without breaking compatibility.
  • Form (components/profile/profile-form.tsx) + page (app/profile/page.tsx) updated
    to the new fields.

iqui — our own themeable UI kit (§5)

  • components/iqui/index.tsx: same contract react95 proves — a flat color-token
    object + a ThemeProvider. No styled-components, no new dependency: components
    read tokens from context and render the classic raised/inset bevel via box-shadow.
    Exposes ThemeProvider, useTheme, bevel, Window, Panel, Button, Anchor,
    and IQ_THEMES.
  • Dogfooded, not dead code: components/profile/profile-card.tsx renders the profile
    preview entirely through iqui, wired into the profile page. New theme object → new
    look, zero new component code — same "data not code" principle as the templates.
  • First-class IQ themes shipped: IQ Dark, Midnight, Sakura, Hacker (plus the Windows 95
    reference).

Build/deps fix

  • next build was failing: git-sdk's optional EVM path imports
    @iqlabs-official/ethereum-sdk + ethers, which were not installed. Installed the
    real peer deps (@iqlabs-official/ethereum-sdk@^0.2.2, ethers@^6.17) rather than
    stubbing them out. Build now resolves the full SDK.

Verification

  • npx tsc --noEmit — clean, real SDK types.
  • npx next build — clean, all 8 routes; /profile static-renders, exercising the
    iqui kit (ThemeProvider + bevel + every component) end to end.
  • Profile write path ported verbatim from iq-wide-web and uses the identical
    @iqlabs-official/solana-sdk@0.1.27 already in the tree — all APIs
    (writer.codeIn, writer.updateUserMetadata, contract.getDbRootPda,
    contract.initializeDbRootInstruction, utils.toSeedBytes) confirmed present.

Not done

  • No live-fire transaction yet — first real codeIn/deployPages from a browser
    wallet needs a funded wallet + RPC. Code path is NEXT_PUBLIC_IQ_MOCK=0.
  • Extra profile themes beyond the four shipped — the four already prove "new look =
    new color object, no new code"; add more when a specific look is wanted.

🤖 Generated with Claude Code

mega123-art and others added 6 commits June 24, 2026 17:25
Installs @iqlabs-official/git-sdk and rewires lib/iqlabs.ts to use
GitClient from the /browser entry. The publish flow now:
  1. Exports site HTML via exportSiteHtml()
  2. Creates an on-chain git repo (idempotent — checks existing repos first)
  3. Commits index.html + iqpages.json via client.commit()
  4. Calls deployPages() to register in IQ Pages gallery
  5. Returns the deployPages sig as the on-chain pointer for the SNS record

Mock mode (NEXT_PUBLIC_IQ_MOCK=1) path is unchanged.
lib/publish.ts updated to pass connection through to publishToIQLabs.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Profile is now a distinct product path from the website builder:

- lib/profile.ts: IQProfile type ({ version, format: 'react95', data, theme }),
  5 built-in react95-format themes (IQ Dark, Windows 95, Midnight, Sakura, Hacker),
  publishProfile() commits iqprofile.json to 'iq-profile' repo via git-sdk
- components/profile/theme-picker.tsx: visual theme selector with live color preview
- components/profile/profile-form.tsx: fields form (name, handle, bio, avatar, links)
- app/profile/page.tsx: full editor — theme picker + live preview + form + publish
- app/page.tsx: updated homepage with two explicit paths (Profile vs Website)
- lib/templates.ts: removed creator-profile from website gallery and TEMPLATE_DEFINITIONS
- app/templates/page.tsx: relabeled as 'Website Templates', added link to profile flow

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Three MIT-licensed builders studied for block modeling, JSON state,
and HTML export — the three things IQForge's website builder needs.

Each example is a minimal runnable demo showing the exact patterns
relevant to IQForge. The top-level README.md captures the comparison
and recommends Puck as the target for Step 4: its config-first block
model mirrors IQForge's "templates are data" design, <Render /> gives
clean HTML export via renderToString, and onPublish hooks directly into
the git-sdk commit flow.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- lib/puck-config.tsx: IQForge block library (Hero, Text, FeatureGrid, CTA,
  Spacer) with inline-only styles — exported HTML is fully self-contained
- lib/puck-export.ts: renderToStaticMarkup via Puck <Render> → index.html
- lib/export-html.ts: branch on site.builder — Puck path or template path
- lib/site-store.ts: newPuckSite() helper for visual-builder drafts
- lib/iqlabs.ts: commits puck.json alongside index.html so published sites
  stay re-editable from chain
- lib/types.ts: SiteBuilder union + Site.puckData field
- app/build/website/page.tsx: 3-step flow (build → domain → publish)
  driven by Puck; reuses existing DomainStep + PublishStep unchanged
- components/website/website-editor.tsx: thin ssr:false Puck wrapper
- app/page.tsx: homepage card for Website now links to /build/website
- tsconfig.json: exclude examples/ (standalone sub-projects with own deps)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Introduced the iqui UI kit with theme context, bevel utility, and components including Window, Panel, Button, and Anchor.
- Implemented ProfileCard component to showcase user profiles using the iqui kit, integrating social links and profile picture.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant